Informationen zum Ablauf

Obwohl dies der derzeitige Industriestandard für SPAs ist, empfiehlt die Arbeitsgruppe OAuth die Verwendung des impliziten Flusses aufgrund verschiedener Sicherheitsbedenken nicht mehr. Auf der Grundlage dieser Empfehlung wird App ID so konfiguriert, dass der Autorisierungscodefluss mit PKCE verwendet wird.

1. Ein Benutzer versucht, sich bei Ihrer Einzelseitenanwendung anzumelden.
2. Das App ID-SDK erstellt eine Code-Prüffunktion für die Autorisierungsanforderung, eine einfache Textversion der Codeabfrage. Zusammen mit der Autorisierungsanforderung sendet der Client die Codeabfrage sowie die Abfragemethode, mit der die Abfrage codiert ist.
3. Der Authentifizierungsablauf wird von App ID in einem neuen Fenster gestartet.
4. Der Benutzer wählt einen Identitätsprovider für die Authentifizierung aus und führt den Anmeldeprozess durch.
5. Das App ID-SDK für die Anwendung empfängt den Bewilligungscode.
6. Anschließend macht das SDK eine XHR-Anforderung an den App ID-Tokenendpunkt, zusammen mit dem Bewilligungscode und der Code-Prüffunktion, um Zugriffs- und Identitätstoken abzurufen.

Verwenden Sie SSO für Cloud Directory? Mit dem App ID -Client-SDK können Sie automatisch ein neues Tokenpaar anfordern, ohne dass sich der Benutzer explizit anmelden muss. Weitere Informationen finden Sie unter Anmeldung im Hintergrund.

Vorbereitende Schritte

Stellen Sie vor Beginn sicher, dass die folgenden Voraussetzungen erfüllt sind.

• Eine Instanz des App ID-Service.
• Ihre Umleitungs-URIs sind im App ID-Service-Dashboard festgelegt.
• Eine Einzelseiten-Anwendung. Wenn Sie über keine verfügen und den Ablauf ausprobieren möchten, versuchen Sie es mit dem Herunterladen der Beispielanwendung von der Übersichtsseite des App ID-Dashboards.

JavaScript-SDK konfigurieren

Um das SDK in Ihrer Anwendung zu installieren, führen Sie als Anleitung die folgenden Schritte aus.

1. Wechseln Sie mit der Eingabeaufforderung in das Verzeichnis, in dem Ihre Anwendung enthalten ist.

2. Installieren Sie den App ID-Service unter Verwendung von NPM oder indem Sie das CDN in der HTML-Hauptdatei verknüpfen.

   • Führen Sie für die Nutzung von NPM den folgenden Befehl aus.

     npm install ibmcloud-appid-js
     

   • Fügen Sie den folgenden Link zu Ihrer HTML-Hauptdatei hinzu, um das CDN hinzuzufügen.

     <script src="https://cdn.appid.cloud.ibm.com/appid-0.3.0.min.js"></script>
     

3. Fügen Sie Ihre Client-ID und Ihren Erkennungsendpunkt zu Ihrer App hinzu, um das SDK zu initialisieren.

   const appID = new AppID();
   await appID.init({
      clientId: '<spaClientID>',
      discoveryEndpoint: '<wellKnownEndpoint>'
   });
   

4. Fügen Sie in Ihrem Anwendungscode nach der Konfiguration Ihrer Anmeldeschaltfläche einen Aufruf an signin hinzu. Daraufhin wird ein Popup-Fenster geöffnet, in dem der Benutzer aufgefordert wird, seine Berechtigungsnachweise einzugeben. Nach erfolgreicher Authentifizierung wird die Anzeige geschlossen und der Benutzer ist authentifiziert.

   const tokens = await appID.signin();
   

Konfiguration für eine Anmeldung im Hintergrund

Wenn SSO für Cloud Directory aktiviert ist, können Sie automatisch neue Token für einen Benutzer abrufen, ohne dass dieser sich unter Verwendung der Anmeldung im Hintergrund erneut authentifizieren muss. Um die Anmeldung im Hintergrund zu aktivieren, führen Sie als Anleitung die folgenden Schritte aus.

Aktualisierungstoken werden im SPA-Ablauf nicht zurückgegeben.

1. Navigieren Sie im App ID-Dashboard zu Cloud Directory > Single Sign-on.

2. Legen Sie für Single Sign-on aktivieren die Einstellung Aktiviert fest.

3. Klicken Sie auf Speichern.

4. Fügen Sie den folgenden Code zu Ihrer Anwendung hinzu. Achten Sie darauf, Ihre Anwendung so zu konfigurieren, dass die Anmeldeschaltfläche angezeigt wird, wenn die Anmeldung im Hintergrund fehlschlägt.

   const tokens = await appID.silentSignin();
   if (!tokens) {
      document.getElementById('login').addEventListener('click', async () => {
      const tokens = await appID.signin();
      });
   }