So nutzen Sie die API-Aufrufe des Login Widget SDK
Sie können die API-Aufrufe des Login Widget SDK getrennt vom Login-Widget nutzen, wenn Sie:
- Ihr eigenes Widget-Design verwenden möchten
- den Ablauf des Login-Widgets nur teilweise implementieren möchten
Code-Initialisierung
Um die API-Aufrufe des Login Widget SDK ohne Widget zu verwenden, binden Sie den folgenden Code in den <body>
-Tag ein:
<script>
const api = new XsollaLogin.Api({
projectId: 'someProjectId'
});
</script>
Initialisierungscode bei Verwendung eines npm-Pakets:
import XsollaLogin from '@xsolla/login-sdk';
const api = new XsollaLogin.Api({
projectId: 'someProjectId'
});
Die folgenden Parameter werden im Initialisierungscode übermittelt:
Parameter | Typ | Beschreibung |
---|---|---|
projectId | string | ID Ihres Login-Projekts aus dem Kundenportal. Erforderlich. |
fullLocale | string | Sprache der Benutzeroberfläche und eine Region im Format <language code>_<country code> , wobei:
Der Parameter beeinflusst die Reihenfolge der sozialen Netzwerke, da diese nach deren Benutzungshäufigkeit in der angegebenen Region angeordnet sind. Außerdem bestimmt er die Sprache, in der die E-Mails an die Nutzer versendet werden. |
callbackUrl | string | Die URL, mit der der Xsolla Login-Server arbeitet, sofern die Anmeldung oder Registrierung erfolgreich war. |
emailTemplate | string | Der Name des Projekts, in dessen Namen die E-Mails an die Benutzer gesendet werden. |
payload | string | Zusätzliche Daten, die in einem Code übermittelt werden können. Diese Daten werden nach erfolgreicher Anmeldung dem Benutzer-JWT hinzugefügt. |
with_logout | boolean | Legt fest, ob ältere Token bei einer erneuten Anmeldung widerrufen werden sollen. false ist voreingestellt. |
clientId | string | ID der Client-App. Wird übermittelt, wenn die auf dem OAuth 2.0-Protokoll basierende Authentifizierung in der App zum Einsatz kommt. |
scope | string | Zusätzliche Angaben über ein von der Anwendung angefordertes Benutzerkonto. Wird übermittelt, wenn die auf dem OAuth 2.0-Protokoll basierende Authentifizierung in der App zum Einsatz kommt. Mögliche Werte:
|
state | string | Eine zusätzliche Benutzerverifizierung, um beispielsweise CSRF-Attacken zu verhindern. Mindestlänge: 8 Zeichen. |
redirectUrl | string | Die URL, zu der der Benutzer weitergeleitet wird, nachdem er sein Konto bestätigt, sich angemeldet oder das Passwort zurückgesetzt hat. |
disableConfirmByLink | boolean | Ob die Bestätigung der passwortlosen Authentifizierung per Klick auf einen Link in der E-Mail deaktiviert werden soll, wenn sich Benutzer ohne Passwort per E-Mail-Adresse oder Telefonnummer anmelden. false ist voreingestellt. |
is_oauth2 | boolean | Legt fest, ob die auf dem OAuth 2.0-Protokoll basierende Authentifizierung für Nutzer zum Einsatz kommt. false ist voreingestellt. |
API-Aufrufe
Folgende API-Aufrufe des Login Widget SDK lassen sich auch ohne Login-Widget nutzen:
- Benutzerregistrierung per Passwort
- Anmelden mit Passwort
- Kontobestätigung
- Passwortlose Authentifizierung
- Felder für zusätzliche Abfragen ohne Passwort
- Passwort zurücksetzen
- Single Sign-On
Benutzerregistrierung per Passwort
Aufruf | Beschreibung | Parameter |
---|---|---|
api.signup(userInfo); | Registriert einen neuen Benutzer. Die Bentzerdaten werden während der Registrierung im userInfo -Objekt übermittelt. Der Token des registrierten Benutzers wird in der Antwort übermittelt. |
|
let result
// Request
api.signup({
userInfo: {
email: 'email@address.com',
fields: {
nickname: 'Johny'
},
password: 'password123',
username: 'John'
}
}).then((res) => {
result = res;
})
// Response
result === {
login_url: 'https://someurl.com?token=XXXXXXX'
}
Anmelden mit Passwort
Aufruf | Beschreibung | Parameter |
---|---|---|
api.login(credentials); | Authentifiziert einen Benutzer anhand eines Passworts. Die für die Benutzeranmeldung erforderlichen Benutzerdaten werden im credentials -Objekt übermittelt. Der Token des authentifizierten Benutzers wird in der Antwort übermittelt. |
|
let result
// Request
api.login({
credentials: {
password: 'password123',
username: 'email@address.com'
}
}).then((res) => {
result = res;
})
// Response
result === {
login_url: 'https://someurl.com?token=XXXXXXX'
}
// Response with additional fields
result === {
ask_fields: [{
confirmation_type: 'code' || 'link'
name: 'phone_number'
required: false
step: 0 // Displays the position of the field in the data retrieval queue.
type: 'phone'
validation: {} // Custom validation
}]
login_url: 'https://someurl.com?token=XXXXXXX',
token: 'sometoken'
}
Kontobestätigung
Aufruf | Beschreibung | Parameter |
---|---|---|
api.resendEmail(username); | Sendet eine weitere E-Mail zur Bestätigung des Kontos. Um das Konto zu bestätigen, sollte der Benutzer auf den Link in der E-Mail klicken. Die E-Mail-Adresse des Benutzers wird im Objekt username übermittelt. Als Antwort wird der Standardcode 204 zurückgegeben. |
|
let result
// Request
api.resendEmail({
username: 'email@address.com'
}).then((res) => {
res.code === 204;
})
Passwortlose Authentifizierung
Ablauf für den Nutzer:- Der Benutzer gibt seine Telefonnummer oder E-Mail-Adresse ein. Je nach den eingegebenen Anmeldedaten wird entweder
api.phoneGetCode
oderapi.emailGetCode
aufgerufen. - Der Server empfängt die Daten und sendet einen Code per E-Mail oder SMS an den Benutzer. Wird beim Initialisieren des Codes der Parameter
disableConfirmByLink=true
(deaktiviert die Anmeldebestätigung über den Link in der E-Mail) übermittelt, wird für die automatische Weiterleitung des Benutzers nach dem Anklicken des Links der Aufrufapi.getConfirmCode
verwendet. - Als Antwort auf den Aufruf
api.phoneGetCode
bzw.api.emailGetCode
erhält man den Parameteroperation_id
, mit dem sich die Telefonnummer bzw. die E-Mail-Adresse durch den Aufrufapi.loginWithPhoneCode
bzw.api.loginWithEmailCode
bestätigen lässt. - Nachdem die E-Mail-Adresse bzw. die Telefonnummer erfolgreich bestätigt wurde, erhält man als Antwort die URL mit dem
token
-Parameter. Damit lassen sich zusätzliche Daten über den Benutzer abfragen.
Aufruf | Beschreibung | Parameter |
---|---|---|
api.phoneGetCode({ phone_number, link_url, isOauth2 }); | Sendet einen Bestätigungscode an die Telefonnummer. Der zur Bestätigung der Telefonnummer verwendete operation_id -Parameter wird in der Antwort zurückgegeben. |
|
let result
// Request
api.phoneGetCode({
phone_number: '+somenumber',
link_url: 'https://someurl.com',
isOauth2: true
}).then((res) => {
result = res;
})
// Response
result === {
operation_id: '2334j255fdf13d515fgd1'
}
Aufruf | Beschreibung | Parameter |
---|---|---|
api.phoneGetCode({ phone_number, link_url, isOauth2 }); | Sendet einen Bestätigungscode an die E-Mail-Adresse. Der zur Bestätigung der E-Mail-Adresse verwendete operation_id -Parameter wird in der Antwort zurückgegeben. |
|
let result
// Request
api.emailGetCode({
email: 'email@address.com',
link_url: 'https://someurl.com',
isOauth2: true
}).then((res) => {
result = res;
})
// Response
result === {
operation_id: '2334j255fdf13d515fgd1'
}
Aufruf | Beschreibung | Parameter |
---|---|---|
api.getConfirmCode({ cancelToken, login, operation_id }); | Ruft einen Bestätigungscode ab, um den Benutzer nach Klick auf den Link automatisch weiterzuleiten. |
|
let result
// Request
const axiosCancelToken = Axios.CancelToken.source();
api.getConfirmCode({
cancelToken: axiosCancelToken,
login: '+somenumber' || 'email@address.com',
operation_id: '334j255fdf13d515fgd1'
}).then((res) => {
result = res;
})
// Response
result === {
code: 'string'
}
// If the waiting time has elapsed, returns:
result === {
error: {
code: '010-050',
description: 'Deadline exceeded.'
}
}
// If you no longer need to wait for verification through the link you can close the request waiting period:
axiosCancelToken.cancel();
Aufruf | Beschreibung | Parameter |
---|---|---|
api.loginWithPhoneCode({ phone_number, Code, operation_id, isOauth2 }); | Bestätigt die Telefonnummer. Als Antwort erhält man die URL mit dem Parameter token . Dieser wird bei der Abfrage zusätzlicher Daten über den Nutzer verwendet. |
|
let result
// Request
api.loginWithPhoneCode({
phone_number: 'email@address.com',
code: '3423',
operation_id: '334j255fdf13d515fgd1',
isOauth2: true
}).then((res) => {
result = res;
})
// Response
result === {
login_url: 'https://someurl.com?token=XXXXXXX'
}
// Response with additional fields
result === {
ask_fields: [{
confirmation_type: 'code' || 'link'
name: 'email'
required: false
step: 0 // Displays the position of the field in the data retrieval queue.
type: 'email'
validation: {} // Custom validation
}]
login_url: 'https://someurl.com?token=XXXXXXX',
token: 'sometoken'
}
Aufruf | Beschreibung | Parameter |
---|---|---|
api.loginWithEmailCode({ email, code, operation_id, isOauth2 }); | Bestätigt die E-Mail-Adresse. Als Antwort erhält man die URL mit dem Parameter token . Dieser wird bei der Abfrage zusätzlicher Daten über den Nutzer verwendet. |
|
let result
// Request
api.loginWithEmailCode({
email: 'email@address.com',
code: '3423',
operation_id: '334j255fdf13d515fgd1',
isOauth2: true
}).then((res) => {
result = res;
})
// Response
result === {
login_url: 'https://someurl.com?token=XXXXXXX'
}
// Response with additional fields
result === {
ask_fields: [{
confirmation_type: 'code' || 'link'
name: 'phone_number'
required: false
step: 0 // Displays the position of the field in the data retrieval queue.
type: 'phone'
validation: {} // Custom validation
}]
login_url: 'https://someurl.com?token=XXXXXXX',
token: 'sometoken'
}
Felder für zusätzliche Abfragen ohne Passwort
Ablauf für den Nutzer:- Nach erfolgreicher Authentifizierung eines Benutzers erhält man als Antwort auf den Aufruf
api.loginWithEmailCode
oderapi.loginWithPhoneCode
ein Array von Feldern, die in einer App in einem separaten Formular angezeigt werden können und mit denen sich zusätzlich die Telefonnummer und die E-Mail-Adresse des Benutzers erfassen lassen. Die Liste der Felder lässt sich ebenfalls über den Aufrufapi.getAskFields
abrufen. - Der Benutzer gibt seine Telefonnummer oder E-Mail-Adresse ein. Anschließend wird der
api.ask
-Aufruf ausgeführt. - Der Server empfängt die Daten und sendet einen Bestätigungscode an eine Telefonnummer oder E-Mail-Adresse. Wird beim Initialisieren des Codes der Parameter
disableConfirmByLink=true
(deaktiviert die Anmeldebestätigung über den Link in der E-Mail) übermittelt, wird für die automatische Weiterleitung des Benutzers nach dem Anklicken des Links der Aufrufapi.getConfirmCode
verwendet. - Als Antwort auf den Aufruf
api.ask
erhält man den Parameteroperation_id
, mit dem sich die Telefonnummer bzw. die E-Mail-Adresse durch den Aufrufapi.loginWithPhoneCode
bzw.api.loginWithEmailCode
bestätigen lässt. - Nach erfolgreicher Datenbestätigung erhält man als Antwort die URL, an die ein authentifizierter Benutzer weitergeleitet wird.
Aufruf | Beschreibung | Parameter |
---|---|---|
api.getAskFields(token); | Ruft die Liste der Felder für weitere Abfragen ab. |
|
let result
// Request
api.getAskFields({
token: 'sometoken'
}).then((res) => {
result = res;
})
// Response
result === [
{
confirmation_type: 'code' || 'link'
name: 'phone_number' || 'email'
required: false
step: 0 // Displays the position of the field in the data retrieval queue.
type: 'phone' || 'email'
validation: {} // Custom validation
}
]
Aufruf | Beschreibung | Parameter |
---|---|---|
api.ask({ fields, token, link_url }); | Sendet zusätzliche Daten (Telefonnummer oder E-Mail-Adresse) über den Benutzer. Der zur Bestätigung der angegebenen Telefonnummer oder E-Mail-Adresse genutzte operation_id -Parameter wird in der Antwort zurückgegeben. Wenn keine Bestätigung erforderlich ist, wird in der Antwort die URL mit dem token -Parameter zurückgegeben, an die ein authentifizierter Benutzer weitergeleitet wird. |
|
let result
// Request
api.ask({
fields: {
phone_number: '+somenumber'
},
link_url: 'https://someurl.com',
token: 'sometoken'
}).then((res) => {
result = res;
})
// Response
result === {
error: {
code: '003-014'
description: 'Confirm phone number.'
details: { operation_id: 'BPaBScLM44GesoOYSxT5I8QfgIrTSURd' }
}
}
// Response without confirmation
result === {
redirect_url: '<login_url>?token=<token>'
}
Beispiel für das Senden einer E-Mail-Adresse:
let result
// request
api.ask({
fields: {
email: 'email@address.com'
},
link_url: 'https://someurl.com',
token: 'sometoken'
}).then((res) => {
result = res;
})
// Response
result === {
error: {
code: '003-011'
description: 'Confirm email.'
details: { operation_id: 'BPaBScLM44GesoOYSxT5I8QfgIrTSURd' }
}
}
// Response without confirmation
result === {
redirect_url: '<login_url>?token=<token>'
}
Aufruf | Beschreibung | Parameter |
---|---|---|
api.getConfirmCode({ cancelToken, login, operation_id }); | Ruft den Bestätigungscode ab, um den Benutzer nach Klick auf den Link automatisch weiterzuleiten. |
|
let result
// Request
const axiosCancelToken = Axios.CancelToken.source();
api.getConfirmCode({
cancelToken: axiosCancelToken,
login: '+somenumber' || 'email@address.com',
operation_id: '334j255fdf13d515fgd1'
}).then((res) => {
result = res;
})
// Response
result === {
code: 'string'
}
// If the waiting time has elapsed, returns:
result === {
error: {
code: '010-050',
description: 'Deadline exceeded.'
}
}
// If you no longer need to wait for verification through the link you can close the request waiting period:
axiosCancelToken.cancel();
Aufruf | Beschreibung | Parameter |
---|---|---|
api.loginWithPhoneCode({ phone_number, code, operation_id, isOauth2 }); | Bestätigt die Telefonnummer. Als Antwort erhält man die URL mit dem Parameter token . Dieser wird bei der Abfrage zusätzlicher Daten über den Nutzer verwendet. |
|
let result
// Request
api.loginWithPhoneCode({
phone_number: 'email@address.com',
code: '3423',
operation_id: '334j255fdf13d515fgd1',
isOauth2: true
}).then((res) => {
result = res;
})
// Response
result === {
login_url: 'https://someurl.com?token=XXXXXXX'
}
// Response with additional fields
result === {
ask_fields: [{
confirmation_type: 'code' || 'link'
name: 'email'
required: false
step: 0 // Displays the position of the field in the data retrieval queue.
type: 'email'
validation: {} // Custom validation
}]
login_url: 'https://someurl.com?token=XXXXXXX',
token: 'sometoken'
}
Aufruf | Beschreibung | Parameter |
---|---|---|
api.loginWithEmailCode({ email, code, operation_id, isOauth2 }); | Bestätigt die E-Mail-Adresse. Als Antwort erhält man die URL mit dem Parameter token . Dieser wird bei der Abfrage zusätzlicher Daten über den Nutzer verwendet. |
|
let result
// Request
api.loginWithEmailCode({
email: 'email@address.com',
code: '3423',
operation_id: '334j255fdf13d515fgd1',
isOauth2: true
}).then((res) => {
result = res;
})
// Response
result === {
login_url: 'https://someurl.com?token=XXXXXXX'
}
// Response with additional fields
result === {
ask_fields: [{
confirmation_type: 'code' || 'link'
name: 'phone_number'
required: false
step: 0 // Displays the position of the field in the data retrieval queue.
type: 'phone'
validation: {} // Custom validation
}]
login_url: 'https://someurl.com?token=XXXXXXX',
token: 'sometoken'
}
Zurücksetzen von Passwörtern
Ablauf für den Nutzer:- Die Anwendung öffnet ein Formular, in das der Benutzer seine E-Mail-Adresse oder seinen Benutzernamen eingibt. Anschließend wird der
api.reset
-Aufruf ausgeführt. - Der Server sendet eine Bestätigung per E-Mail an den Benutzer.
- Der Benutzer klickt auf den Link in der E-Mail, woraufhin sich ein Formular öffnet.
- Dort gibt der Benutzer ein neues Passwort ein. Anschließend wird der
api.set
-Aufruf ausgeführt.
Aufruf | Beschreibung | Parameter |
---|---|---|
api.reset(username); | Setzt das Passwort zurück und bestätigt die Aktion. Um das Zurücksetzen des Passworts zu bestätigen, muss der Benutzer auf den Link in der E-Mail klicken. Der Benutzername oder die E-Mail-Adresse des Benutzers wird im username -Objekt übermittelt. Als Antwort wird der Code 204 zurückgegeben. |
|
let result
// Request
api.reset({
username: 'John'
}).then((res) => {
res.code === 204;
})
Aufruf | Beschreibung | Parameter |
---|---|---|
api.set({ new_password, reset_code, user_id }); | Legt ein neues Passwort fest und bestätigt die Aktion. Um ein neues Passwort zu bestätigen, muss der Benutzer auf den Link in der E-Mail klicken. Als Antwort wird der Code 204 zurückgegeben. |
|
let result
// Request
api.set({
new_password: 'newpass',
reset_code: '3423',
user_id: '324324234'
}).then((res) => {
res.code === 204;
})
Single Sign-On
Parameter | Typ | Beschreibung |
---|---|---|
api.checkUserAuthSSO(); | Prüft, ob ein Benutzer über Single Sign-On autorisiert ist. Wenn dem so ist, wird ein Einmalcode (code ) zurückgegeben. |
let result
// Request
api
.checkUserAuthSSO()
.then(res => {
result === res;
});
result === {
code: "examplecode"
}
Aufruf | Beschreibung | Parameter |
---|---|---|
api.userAuthSSOWithRedirect(loginUrl); | Prüft, ob ein Benutzer über Single Sign-On autorisiert wurde. Wenn dem so ist, wird der Benutzer zur URL weitergeleitet; die generierte loginUrl enthält einen Autorisierungscode. |
|
// Request
api
.userAuthSSOWithRedirect(
loginUrl: 'some-redirect-url.com'
)
.then(res => {
res.code === 302;
});
Aufruf | Beschreibung | Parameter |
---|---|---|
api.logout(token, session); | Meldet einen Benutzer aus dem System ab und löscht eine Benutzersitzung entsprechend dem Parameter session . |
|
// Request
api
.logout(
token: 'exampleToken',
session: 'sso' | 'all'
)
.then(res => {
res.code === 204;
});
Parameter | Typ | Beschreibung |
---|---|---|
api.clearSSO(); | Entfernt die für den Single-Sign-on zuständigen Cookie-Dateien vom aktuellen Gerät des Benutzers. Bei einem erfolgreichem Aufruf wird in der Antwort der Code 204 zurückgegeben. |
// Request
api
.clearSSO()
.then(() => {
// Success
});
Haben Sie einen Tippfehler oder einen anderen Textfehler gefunden? Wählen Sie den Text aus und drücken Sie Strg+Eingabe.