react discord login

React-Discord-Login

react-discord-login ist eine leichte und flexible React-Komponente zur einfachen Integration der „Mit Discord anmelden“-Funktionalität in Ihre Webanwendungen. Ermöglichen Sie Ihren Benutzern die nahtlose Anmeldung mit ihren Discord-Konten.

Installation

npm install react-discord-login
//or
yarn add react-discord-login
//or
bun add react-discord-login

Verwendung

 import { useDiscordLogin , UseDiscordLoginParams } from 'react-discord-login' ;

const YourComponent = ( ) => {
    const discordLoginParams : UseDiscordLoginParams = {
        clientId : 'YOUR_DISCORD_CLIENT_ID' ,
        redirectUri : 'YOUR_REDIRECT_URI' ,
        responseType : 'token' , // or 'code'
        scopes : [ 'identify' , 'email' ] ,
        onSuccess : response => {
            // Handle successful login
            console . log ( 'Login successful:' , response ) ;
        } ,
        onFailure : error => {
            // Handle login failure
            console . error ( 'Login failed:' , error ) ;
        } ,
    } ;

    const { buildUrl , isLoading } = useDiscordLogin ( discordLoginParams ) ;

    return (
        < div >
            < button onClick = { ( ) => ( window . location . href = buildUrl ( ) ) } disabled = { isLoading } >
                Sign in with Discord
            < / button >
        < / div >
    ) ;
} ; 

API-Referenz

Verwenden Sie DiscordLogin

 type UseDiscordLogin = ( params : UseDiscordLoginParams ) => {
    buildUrl : ( ) => string ;
    isLoading : boolean ;
} ; 

Parameter:

• params : Ein Objekt, das Discord-Anmeldeparameter und optionale Rückruffunktionen enthält.
• clientId : Client-ID der Discord-Anwendung.
• RedirectUri : Umleitungs-URI für den OAuth2-Fluss.
• ResponseType : Antworttyp („Token“ oder „Code“).
• Bereiche : Array der angeforderten OAuth2-Bereiche.
• onSuccess : Callback-Funktion für erfolgreiche Anmeldung.
• onFailure : Rückruffunktion für Anmeldefehler.

Rückgaben:

Ein Objekt mit den folgenden Eigenschaften:

• buildUrl : Funktion zum Erstellen der Discord-Anmelde-URL.
• isLoading : Boolescher Wert, der angibt, ob der Anmeldevorgang ausgeführt wird.

Typen

Zur Verbesserung der Codequalität und der Entwicklungserfahrung werden mehrere TypeScript-Typen bereitgestellt:

• DiscordLoginParams
• DiscordLoginConfig
• Benutzer
• Fehlerantwort
• CodeResponse
• TokenResponse
• Verwenden Sie DiscordLoginParams
• OnSuccessFunc
• OnFailureFunc
• GetCallbackResponseFunc

Lizenz

Dieses Projekt ist unter der MIT-Lizenz lizenziert – Einzelheiten finden Sie in der LIZENZ-Datei.