Anmeldewidget verwenden

Mit IBM Cloud® App ID können Sie eine Standardbenutzerschnittstelle verwenden, die als Anmeldewidget bezeichnet wird, um es den Benutzern der Anwendung zu ermöglichen, den Identitätsprovider auszuwählen, mit dem sie sich anmelden möchten. Wenn Sie Cloud Directory verwenden, bietet das Login Widget auch zusätzliche Benutzeroberflächen für Funktionen wie Anmeldung, Passwort vergessen, Multi-Faktor-Authentifizierung und mehr.

Informationen zum Anmeldewidget

Einer der wichtigsten Vorteile des Anmeldewidgets ist die Tatsache, dass Sie mit der Verwendung von App ID beginnen können, bevor Sie eine eigene Benutzerschnittstellen für die Authentifizierung implementieren; dies erleichtert das Onboarding für Entwickler erheblich.

Was ist das Standardverhalten eines Anmeldewidgets?

Das Anmeldewidget ist standardmäßig für die Verwendung von Facebook, Google und Cloud Directory aktiviert. Sie können das Verhalten jederzeit ändern, indem Sie die Identitätsprovider auswählen, die Sie als Option konfigurieren möchten. Wenn mehrere Identitätsprovider aktiviert sind, wird vom Anmeldewidget ein Bildschirm angezeigt, in dem der Benutzer seinen Identitätsprovider auswählen kann. Wenn jedoch ein einzelner Provider aktiviert ist, wird den Benutzern die zuvor erwähnte Auswahlanzeige nicht angezeigt. Sie werden direkt zum Identitätsprovider weitergeleitet, um den Anmeldeprozess zu starten.

Wenn Sie zum Beispiel die Standardeinstellung verwenden (Facebook, Google und Cloud Directory), wird der Bildschirm den Benutzern angezeigt. Wenn Sie nur Facebook aktivieren, werden die Benutzer zur Authentifizierung direkt zu Facebook weitergeleitet.

Welche Anzeigen können für die einzelnen Provider angezeigt werden?

Wenn Sie Cloud Directory verwenden, kann Ihnen App ID die erweiterte Funktionalität der Benutzerverwaltung bieten. Die erweiterte Funktionalität gilt auch für die Funktionen des Anmeldewidgets. Benutzer, die in Cloud Directory gespeichert sind, können die Vorteile der Funktionen genießen, zum Beispiel die Registrierung oder das Zurücksetzen des Kennworts direkt im Anmeldewidget. In der folgenden Tabelle sehen Sie, welche Anzeigen Sie für den jeweiligen Identitätsprovidertyp anzeigen können.

Die Login-Widget-Bildschirme, die jeder Identitätsanbieter anzeigen kann
Anzeige 'Anmeldewidget' Social-Media-Identitätsprovider Unternehmensidentitätsprovider Cloud-Verzeichnis
Anmelden Symbol für Häkchen Symbol für Häkchen Symbol für Häkchen
Registrieren Symbol für Häkchen
Kennwort vergessen Symbol für Häkchen
Kennwort ändern Symbol für Häkchen
Accountdetails Symbol für Häkchen

SSO-Anmeldeablauf anpassen

Nach erfolgreicher Authentifizierung erstellt App ID ein Sitzungscookie mit verschlüsselten Zugriffs- und Identitätstoken, die Ihre Apps zur Authentifizierung verwenden können. Eine andere Möglichkeit, den Ablauf anzupassen, besteht darin, ein Zugriffstoken an Ihren Browser zu senden, das von beliebigen Browser-Apps in ihrer Ajax-Anforderung verwendet werden kann.

Anmeldewidget anpassen

Das Anmeldewidget ist dynamisch. Sie können die Darstellung und Funktionsweise oder die Konfiguration des Identitätsproviders anpassen; die Änderungen werden unverzüglich wirksam. Es ist nicht erforderlich, den Anwendungscode zu aktualisieren oder die App auf irgendeine Art erneut bereitzustellen.

Benötigen Sie mehr Anpassungen, als dies mithilfe des Anmeldewidgets möglich ist? Sie können Ihre eigene vollständig angepasste Benutzerschnittstelle für die Anmeldung, die Registrierung, das Zurücksetzen des Kennworts und weitere Abläufe implementieren, um eine Erfahrung zu erstellen, die für Ihre App einmalig ist. Prüfen Sie zunächst das App-Branding.

Anpassen der Anzeige:

  1. Öffnen Sie das App ID-Service-Dashboard.
  2. Wählen Sie den Abschnitt für die Anmeldeanpassung aus. Sie können die Darstellung des Anmeldewidgets ändern, damit es zur Außendarstellung des Unternehmens passt.
  3. Laden Sie das Unternehmenslogo hoch, indem Sie eine PNG- oder JPG-Datei auf Ihrem lokalen System auswählen. Die empfohlene Bildgröße beträgt 320 x 320 Pixel. Die maximale Dateigröße beträgt 100 KB.
  4. Wählen Sie eine Farbe für die Kopfzeile für das Widget aus der Farbauswahl aus oder geben Sie den hexadezimalen Code für eine andere Farbe an.
  5. Überprüfen Sie das Vorschaufenster und klicken Sie auf Änderungen speichern, wenn Sie mit Ihren Anpassungen zufrieden sind. Es wird eine entsprechende Bestätigungsnachricht angezeigt.
  6. Aktualisieren Sie in Ihrem Browser die Anmeldeseite, um die vorgenommenen Änderungen zu überprüfen.

Anmeldewidget mit dem Android-SDK anzeigen

Sie können vorkonfigurierte Bildschirme mit dem Android-Client-SDK aufrufen.

Den folgenden Befehl in den Code einfügen.

LoginWidget loginWidget = AppID.getInstance().getLoginWidget();
loginWidget.launch(this, new AuthorizationListener() {
      @Override
      public void onAuthorizationFailure (AuthorizationException exception) {
      //Exception occurred
      }

      @Override
      public void onAuthorizationCanceled () {
      //Authentication canceled by the user
      }

      @Override
      public void onAuthorizationSuccess (AccessToken accessToken, IdentityToken identityToken, refreshToken: RefreshToken) {
      //User authenticated
      }
   });

Registrieren

  1. Konfigurieren Sie Ihre Cloud Directory-Einstellungen in der Konsole. Die Optionen Benutzern die Registrierung bei Ihrer App ermöglichen und Benutzern das Kontomanagement innerhalb Ihrer App ermöglichen müssen auf Ein eingestellt sein.

  2. Fügen Sie den folgenden Code zu Ihrer App hinzu. Wenn sich ein Benutzer über Ihre angepasste Anzeige für Ihre App anmeldet, wird der Anmeldeablauf gestartet. Der folgende Aufruf registriert nicht nur den Benutzer, sondern kann abhängig von Ihrer Cloud Directory-Konfiguration auch eine Bestätigungs-E-Mail senden, um die Registrierung abzuschließen.

    LoginWidget loginWidget = AppID.getInstance().getLoginWidget();
loginWidget.launchSignUp(this, new AuthorizationListener() {
   @Override
   public void onAuthorizationFailure (AuthorizationException exception) {
         //Exception occurred
   }

   @Override
   public void onAuthorizationCanceled () {
         //Sign up canceled by the user
   }

   @Override
   public void onAuthorizationSuccess (AccessToken accessToken, IdentityToken identityToken, RefreshToken refreshToken) {
         if (accessToken != null && identityToken != null) {
            //User authenticated
         } else {
            //email verification is required
         }
   }
});

Kennwort vergessen

  1. Konfigurieren Sie Ihre Cloud Directory-Einstellungen in der Konsole. Die Option Benutzern das Kontomanagement innerhalb Ihrer App ermöglichen muss auf Ein eingestellt sein.

  2. Vergewissern Sie sich, dass auf der Registerkarte Kennwort zurücksetzen des Service-Dashboards die Option E-Mail für vergessenes Kennwort auf Ein gesetzt ist.

  3. Fügen Sie den folgenden Code zu Ihrer App hinzu. Wenn ein Benutzer in Ihrer Anwendung auf "Kennwort vergessen" klickt, ruft das SDK die API "forgot_password" auf, um eine E-Mail an den Benutzer zu senden, der es ihnen ermöglicht, ihr Kennwort zurückzusetzen.

    LoginWidget loginWidget = AppID.getInstance().getLoginWidget();
loginWidget.launchForgotPassword(this, new AuthorizationListener() {
   @Override
   public void onAuthorizationFailure (AuthorizationException exception) {
         //Exception occurred
   }

   @Override
   public void onAuthorizationCanceled () {
         // Forogt password canceled by the user
   }

   @Override
   public void onAuthorizationSuccess (AccessToken accessToken, IdentityToken identityToken, RefreshToken refreshToken) {
         // Forgot password finished, in this case accessToken and identityToken will be null.
   }
});

Details ändern

  1. Konfigurieren Sie Ihre Cloud Directory-Einstellungen in der Konsole. Die Optionen Benutzern die Registrierung bei Ihrer App ermöglichen und Benutzern das Kontomanagement innerhalb Ihrer App ermöglichen müssen auf Ein eingestellt sein.

  2. Stellen Sie auf der Registerkarte Kennwort geändert des Service-Dashboards die Option E-Mail bei Kennwortänderung auf 'Ein'.

  3. Rufen Sie das Anmeldewidget auf, um den Verarbeitungsablauf für das Ändern von Details zu starten.

    LoginWidget loginWidget = AppID.getInstance().getLoginWidget();
loginWidget.launchChangeDetails(this, new AuthorizationListener() {
   @Override
   public void onAuthorizationFailure (AuthorizationException exception) {
         // Exception occurred
   }

   @Override
   public void onAuthorizationCanceled () {
         // Changed details canceled by the user
   }

   @Override
   public void onAuthorizationSuccess (AccessToken accessToken, IdentityToken identityToken, RefreshToken refreshToken) {
         // User authenticated, and fresh tokens received
   }
});

Kennwort ändern

  1. Konfigurieren Sie Ihre Cloud Directory-Einstellungen in der Konsole. Die Optionen Benutzern die Registrierung bei Ihrer App ermöglichen und Benutzern das Kontomanagement innerhalb Ihrer App ermöglichen müssen auf Ein eingestellt sein.

  2. Fügen Sie den folgenden Code in Ihre App ein, um den Ablauf für das Ändern des Kennworts zu starten.

    LoginWidget loginWidget = AppID.getInstance().getLoginWidget();
loginWidget.launchChangePassword(this, new AuthorizationListener() {
   @Override
   public void onAuthorizationFailure (AuthorizationException exception) {
         // Exception occurred
   }

   @Override
   public void onAuthorizationCanceled () {
         // Change password canceled by the user
   }

   @Override
   public void onAuthorizationSuccess (AccessToken accessToken, IdentityToken identityToken, RefreshToken refreshToken) {
         // User authenticated, and fresh tokens received
   }
});

Anmeldewidget mit dem iOS Swift-SDK anzeigen

Sie können vorkonfigurierte Bildschirme mit dem iOS Swift Client SDK aufrufen.

Den folgenden Befehl in den Code einfügen.

import IBMCloudAppID
class delegate : AuthorizationDelegate {
   public func onAuthorizationSuccess(accessToken: AccessToken, identityToken: IdentityToken, refreshToken: RefreshToken?) {
         //User authenticated
   }

   public func onAuthorizationCanceled() {
         //Authentication canceled by the user
   }

   public func onAuthorizationFailure(error: AuthorizationError) {
         //Exception occurred
   }
}

AppID.sharedInstance.loginWidget?.launch(delegate: delegate())

Registrieren

  1. Konfigurieren Sie Ihre Cloud Directory-Einstellungen in der Konsole. Die Optionen Benutzern die Registrierung bei Ihrer App ermöglichen und Benutzern das Kontomanagement innerhalb Ihrer App ermöglichen müssen auf Ein eingestellt sein.

  2. Fügen Sie den folgenden Code in Ihre Anwendung ein. Wenn ein Benutzer versucht, sich für Ihre Anwendung zu registrieren, wird das Anmeldewidget aufgerufen und Ihre angepasste Anmeldeseite angezeigt.

    class delegate : AuthorizationDelegate {
   public func onAuthorizationSuccess(accessToken: AccessToken?, identityToken: IdentityToken?, refreshToken: RefreshToken?, response:Response?) {
      if accessToken == nil && identityToken == nil {
      //email verification is required
      return
      }
   //User authenticated
   }

   public func onAuthorizationCanceled() {
      //Sign up canceled by the user
   }

   public func onAuthorizationFailure(error: AuthorizationError) {
      //Exception occurred
   }
}

AppID.sharedInstance.loginWidget?.launchSignUp(delegate: delegate())

Kennwort vergessen

  1. Konfigurieren Sie Ihre Cloud Directory-Einstellungen in der Konsole. Die Option Benutzern das Kontomanagement innerhalb Ihrer App ermöglichen muss auf Ein eingestellt sein.

  2. Vergewissern Sie sich, dass auf der Registerkarte Kennwort zurücksetzen des Service-Dashboards die Option E-Mail für vergessenes Kennwort auf Ein gesetzt ist.

  3. Fügen Sie den folgenden Code in Ihre Anwendung ein. Wenn einer Ihrer App-Benutzer die Aktualisierung seines Kennworts anfordert, wird das Anmeldewidget aufgerufen und der Prozess wird gestartet.

    class delegate : AuthorizationDelegate {
   public func onAuthorizationSuccess(accessToken: AccessToken?, identityToken: IdentityToken?, refreshToken: RefreshToken?, response:Response?) {
      //forgot password finished, in this case accessToken and identityToken will be null.
   }

   public func onAuthorizationCanceled() {
      //forgot password canceled by the user
   }

   public func onAuthorizationFailure(error: AuthorizationError) {
      //Exception occurred
   }
}

AppID.sharedInstance.loginWidget?.launchForgotPassword(delegate: delegate())

Details ändern

  1. Konfigurieren Sie Ihre Cloud Directory-Einstellungen in der Konsole. Die Optionen Benutzern die Registrierung bei Ihrer App ermöglichen und Benutzern das Kontomanagement innerhalb Ihrer App ermöglichen müssen auf Ein eingestellt sein.

  2. Stellen Sie auf der Registerkarte Kennwort geändert des Service-Dashboards die Option E-Mail bei Kennwortänderung auf 'Ein'.

  3. Rufen Sie das Anmeldewidget auf, um den Verarbeitungsablauf für das Ändern von Details zu starten.

    class delegate : AuthorizationDelegate {
   public func onAuthorizationSuccess(accessToken: AccessToken?, identityToken: IdentityToken?, refreshToken: RefreshToken?, response:Response?) {
      //User authenticated, and fresh tokens received
   }

   public func onAuthorizationCanceled() {
         //changed details canceled by the user
   }

   public func onAuthorizationFailure(error: AuthorizationError) {
         //Exception occurred
   }
}

AppID.sharedInstance.loginWidget?.launchChangeDetails(delegate: delegate())

Kennwort ändern

  1. Konfigurieren Sie Ihre Cloud Directory-Einstellungen in der Konsole. Die Optionen Benutzern die Registrierung bei Ihrer App ermöglichen und Benutzern das Kontomanagement innerhalb Ihrer App ermöglichen müssen auf Ein eingestellt sein.

  2. Fügen Sie den folgenden Code in Ihre App ein, um den Ablauf für das Ändern des Kennworts zu starten.

    class delegate : AuthorizationDelegate {
   public func onAuthorizationSuccess(accessToken: AccessToken?, identityToken: IdentityToken?, refreshToken: RefreshToken?, response:Response?) {
         //User authenticated, and fresh tokens received
   }

   public func onAuthorizationCanceled() {
         //change password canceled by the user
   }

   public func onAuthorizationFailure(error: AuthorizationError) {
         //Exception occurred
   }
}

AppID.sharedInstance.loginWidget?.launchChangePassword(delegate: delegate())

Anmeldewidget mit dem Node.js-SDK anzeigen

Sie können vorkonfigurierte Bildschirme mit dem Node.js Server SDK aufrufen.

Eine POST-Route zu Ihrer App hinzufügen, die mit den Parametern für den Benutzernamen und das Kennwort aufgerufen werden kann, und mit dem Kennwort des Ressourceneigners anmelden.

app.post("/form/submit", bodyParser.urlencoded({extended: false}), passport.authenticate(WebAppStrategy.STRATEGY_NAME, {
successRedirect: LANDING_PAGE_URL,
failureRedirect: ROP_LOGIN_PAGE_URL,
failureFlash : true // allow flash messages
}));

WebAppStrategy ermöglicht Benutzern, sich bei Ihren Web-Apps mit einem Benutzernamen und einem Kennwort anzumelden. Nach einer erfolgreichen Anmeldung wird das Zugriffstoken eines Benutzers in der HTTP-Sitzung gespeichert und steht während der Sitzung zur Verfügung. Wenn die HTTP-Sitzung gelöscht wird oder abgelaufen ist, ist das Token ungültig.

Registrieren

  1. Konfigurieren Sie Ihre Cloud Directory-Einstellungen in der Konsole. Die Optionen Benutzern die Registrierung bei Ihrer App ermöglichen und Benutzern das Kontomanagement innerhalb Ihrer App ermöglichen müssen auf Ein eingestellt sein.

  2. Fügen Sie den folgenden Code in Ihre Anwendung ein. Wenn ein Benutzer versucht, sich für Ihre Anwendung zu registrieren, wird das Anmeldewidget aufgerufen und Ihre angepasste Anmeldeseite angezeigt.

    app.get("/sign_up", passport.authenticate(WebAppStrategy.STRATEGY_NAME, {
successRedirect: LANDING_PAGE_URL,
show: WebAppStrategy.SIGN_UP
}));

Kennwort vergessen

  1. Konfigurieren Sie Ihre Cloud Directory-Einstellungen in der Konsole. Die Option Benutzern das Kontomanagement innerhalb Ihrer App ermöglichen muss auf Ein eingestellt sein.

  2. Vergewissern Sie sich, dass auf der Registerkarte Kennwort zurücksetzen des Service-Dashboards die Option E-Mail für vergessenes Kennwort auf Ein gesetzt ist.

  3. Fügen Sie den folgenden Code in Ihre Anwendung ein, um die Eigenschaft show an WebAppStrategy.FORGOT_PASSWORD zu übergeben. Wenn einer Ihrer Benutzer die Aktualisierung seines Kennworts für Ihre App anfordert, wird das Anmeldewidget aufgerufen und der Prozess wird gestartet.

    app.get("/forgot_password", passport.authenticate(WebAppStrategy.STRATEGY_NAME, {
successRedirect: LANDING_PAGE_URL,
show: WebAppStrategy.FORGOT_PASSWORD
}));

Details ändern

  1. Konfigurieren Sie Ihre Cloud Directory-Einstellungen in der Konsole. Die Optionen Benutzern die Registrierung bei Ihrer App ermöglichen und Benutzern das Kontomanagement innerhalb Ihrer App ermöglichen müssen auf Ein eingestellt sein.

  2. Stellen Sie auf der Registerkarte Kennwort geändert des Service-Dashboards die Option E-Mail bei Kennwortänderung auf 'Ein'.

  3. Fügen Sie den folgenden Code in Ihre Anwendung ein, um die Eigenschaft show an WebAppStrategy.FORGOT_PASSWORD zu übergeben und um damit das Formular zum Ändern der Details aufzurufen.

    app.get("/change_details", passport.authenticate(WebAppStrategy.STRATEGY_NAME, {
successRedirect: LANDING_PAGE_URL,
show: WebAppStrategy.CHANGE_DETAILS
}));

Kennwort ändern

  1. Konfigurieren Sie Ihre Cloud Directory-Einstellungen in der Konsole. Die Optionen Benutzern die Registrierung bei Ihrer App ermöglichen und Benutzern das Kontomanagement innerhalb Ihrer App ermöglichen müssen auf Ein eingestellt sein.

  2. Stellen Sie auf der Registerkarte Kennwort geändert des Service-Dashboards die Option E-Mail bei Kennwortänderung auf 'Ein'.

  3. Fügen Sie den folgenden Code in Ihre Anwendung ein, um die Eigenschaft show an WebAppStrategy.FORGOT_PASSWORD zu übergeben und um damit das Formular zum Ändern der Details aufzurufen.

    app.get("/change_password", passport.authenticate(WebAppStrategy.STRATEGY_NAME, {
successRedirect: LANDING_PAGE_URL,
show: WebAppStrategy.CHANGE_PASSWORD
}));