Einrichten der PlayFab-Authentifizierung mit Twitch und HTML5
Dieses Tutorial soll Sie durch den Prozess der PlayFab-Authentifizierung mit Twitch und HTML5/JavaScript führen.
Voraussetzungen
Bevor Sie beginnen, sollten Sie über Folgendes verfügen:
- Ein Twitch-Konto zum Testen.
- Ein registrierter PlayFab-Titel .
- Vertrautheit mit Anmeldegrundlagen und bewährten Methoden.
- Mindestens ein Server mit einem gültigen Domänennamen zur Bereitstellung statischer HTML-Dateien.
Notiz
Informationen zum Einrichten eines Servers mit einem gültigen Domänennamen finden Sie im Tutorial Ausführen eines HTTP-Servers zum Testen .
Server und Domäne
Für dieses Tutorial ist ein Webserver erforderlich, um die Anweisungen befolgen zu können. Wenn Sie noch keinen registrierten Remotewebserver haben, lesen Sie bitte unser Tutorial Ausführen eines HTTP-Servers zum Testen , um Informationen zum Ausführen eines lokalen Webservers zu erhalten.
Notiz
In diesem Tutorial wird davon ausgegangen, dass Ihre Domäne ist [http://localhost/](http://localhost/).
Registrieren einer Twitch-Anwendung
Navigieren Sie zunächst zur Twitch-Website und vergewissern Sie sich, dass Sie angemeldet sind.
- Navigieren Sie zur Dropdownliste Konto .
- Wählen Sie im bereitgestellten Menü Einstellungen aus.
Wählen Sie auf der Seite EinstellungenConnections (1) aus, wie unten gezeigt.
Wählen Sie ganz unten auf der Seite die Schaltfläche Anwendung registrieren (1) aus, wie unten gezeigt.
Eine Seite wird geöffnet, auf der Sie eine neue App konfigurieren können.
- Geben Sie den Namen der Anwendung ein.
- Geben Sie die Umleitungs-URL ein.
- Geben Sie die Anwendungskategorie ein.
- Stimmen Sie dann den Bedingungen von Twitch zu, und wählen Sie die Schaltfläche Registrieren aus.
Wichtig
Beim Testen mit einem lokalen Webserver ermöglicht Twitch die Verwendung **<http://localhost>** als Umleitungs-URL. Stellen Sie sicher, dass Sie den führenden Schrägstrich /einschließen. Ohne einen führenden Schrägstrich erkennt Twitch die localhost-URL nicht.
Nachdem die Anwendung registriert wurde, wird die Seite aktualisiert und zeigt die Client-ID für Ihre Anwendung an.
Notiz
Bewahren Sie diese Client-ID an einem sicheren und leicht zugänglichen Ort auf, da Sie sie später zum Konfigurieren Ihres PlayFab-Titels verwenden werden.
Konfigurieren eines PlayFab-Titels
Nachdem Sie Ihre Twitch-Client-ID erworben haben, können Sie ein Twitch-Add-On für Ihren PlayFab-Titel aktivieren und konfigurieren.
- Wechseln Sie auf ihrem PlayFab-Titelbildschirm zum Menü, und wählen Sie das Element Add-Ons aus.
- Wählen Sie dann den Link "Twitch-Symbol " aus.
Auf der Twitch-Seite :
- Eine Einstellungsseite wird für das Twitch-Add-On geöffnet.
- Geben Sie Ihre Twitch-Client-ID ein.
- Wählen Sie die Schaltfläche Twitch installieren aus.
Nehmen Sie sich einen Moment Zeit, um zu überprüfen, ob das Add-On installiert wurde und keine Fehler aufgetreten sind. Damit wird die Konfiguration des PlayFab-Titels abgeschlossen.
Testen
Verwenden Sie die folgende HTML-Datei, um die PlayFab-Authentifizierung mit Twitch zu testen.
Stellen Sie sicher, dass Sie und PLAYFAB_TITLE_ID_GOES_HERE durch Ihre eigenen Werte ersetzenTWITCH_CLIENT_ID_GOES_HERE.
<!DOCTYPE html>
<html>
<head>
<!-- Include JQuery - dependency of Twitch JS SDK -->
<script src="//code.jquery.com/jquery.min.js"></script>
<!-- Include Twitch SDK -->
<script src="https://ttv-api.s3.amazonaws.com/twitch.min.js"></script>
<!-- Include PlayFab SDK -->
<script src="https://download.playfab.com/PlayFabClientApi.js"></script>
</head>
<body>
<p>Twitch Auth Example</p>
<button onclick="login()">Login With Twitch</button>
<script>
// Establish Twitch Auth Callback (invoked when logged in with Twitch)
Twitch.events.addListener('auth.login', function() {
logLine("Logged in with Twitch!");
// Invoke login with PlayFab code and pass the token
loginWithPlayFab(Twitch.getToken());
});
// Run Twitch SDK initialization
Twitch.init({clientId: 'TWITCH_CLIENT_ID_GOES_HERE'}, function(error, status) {
logLine("Twitch SDK Initialized");
});
// This method is invoked when you press the button
function login() {
logLine("Logging in via Twitch...");
Twitch.login({
scope: ['user_read', 'channel_read']
});
}
function loginWithPlayFab(accessToken){
logLine("Logging in via PlayFab...");
// When given accessToken, make call to LoginWithTwitch API Call
// Make sure to use your own PlayFab Title ID
PlayFabClientSDK.LoginWithTwitch({
AccessToken: accessToken,
TitleId: "PLAYFAB_TITLE_ID_GOES_HERE",
CreateAccount: true
}, onPlayFabResponse);
}
// Handles response from playfab.
function onPlayFabResponse(response, error) {
if (response)
logLine("Response: " + JSON.stringify(response));
if (error)
logLine("Error: " + JSON.stringify(error));
}
function logLine(message) {
console.log(message);
var textnode = document.createTextNode(message);
document.body.appendChild(textnode);
var br = document.createElement("br");
document.body.appendChild(br);
}
</script>
</body>
</html>
Fordern Sie die folgende Datei von Ihrem Server an, indem Sie die Domäne verwenden, die Sie in unserem Fall während der Konfiguration
<http://localhost>der Twitch-Anwendung eingerichtet haben.Warten Sie nach dem Öffnen der Seite auf die Meldung, dass das Twitch SDK initialisiert wurde.
Wählen Sie dann die Schaltfläche Login with Twitch (Mit Twitch anmelden ) aus.
Folgen Sie den Anweisungen von Twitch im Popupfenster, und watch Sie die Ausgabe.
Wichtig
Wenn Sie beim Erreichen der Seite bereits eine Twitch-Authentifizierungssitzung haben, ist es möglich, dass Rückrufe in einer anderen, unerwarteten Reihenfolge ausgelöst werden. Dieser Fall ist im folgenden Screenshot dargestellt. Sie sollten jedoch sicherstellen, dass nur die Anmeldung über PlayFab folgt, nachdem Sie bei Twitch angemeldet sind. Dies bedeutet, dass das Token aus dem lokalen Speicher empfangen oder wiederhergestellt wurde, und wir müssen nicht warten, bis das Twitch SDK mit der Anmeldung bei PlayFab beginnt.
Wenn PlayFab es schafft, einen SessionTicketzu erwerben, haben Sie erfolgreich die Twitch-Authentifizierung in Ihre PlayFab-App integriert.