ログイン・ウィジェットの使用

IBM Cloud® App ID では、ログイン・ウィジェットというデフォルト UI を使用して、サインインに使用する ID プロバイダーをアプリケーション・ユーザーに選択させることができます。 Cloud Directoryを使用している場合、ログインウィジェットはサインアップ、パスワード忘れ、多要素認証などの機能の追加UIも提供します。

ログイン・ウィジェットの利点の 1 つは、独自の認証 UI を一切実装せずに、App ID の使用を開始できることです。これにより、開発者のオンボーディング・エクスペリエンスがはるかに簡単になります。

デフォルトでは、ログイン・ウィジェットは Facebook、Google、Cloud Directory を使用できるように設定されます。この動作は、オプションとして構成する ID プロバイダーを選択して、いつでも変更できます。複数の ID プロバイダーを有効にすると、ID プロバイダーをユーザーが選択できる画面がログイン・ウィジェットに表示されます。一方、プロバイダーを 1 つだけ有効にした場合、そのような選択画面はユーザーに表示されません。ユーザーは直接 ID プロバイダーに転送され、サインイン・プロセスを開始します。

例えば、デフォルトの Facebook、Google、および Cloud Directory を使用している場合は、ユーザーに選択画面が表示されます。 Facebook のみを有効にした場合は、ユーザーは認証のためにすぐに Facebook に転送されます。

Cloud Directory を使用する場合は、App ID で利用できるユーザー管理機能が拡張されます。機能の拡張は、ログイン・ウィジェットの機能にも当てはまります。 Cloud Directory に保管されているユーザーは、登録やパスワードのリセットなどの機能をログイン・ウィジェットで直接利用できます。以下の表を参照して、ID プロバイダーのタイプごとに表示できる画面を確認してください。

各 ID プロバイダが表示できるログイン・ウィジェット画面
ログイン・ウィジェット画面	ソーシャル ID プロバイダー	エンタープライズ ID プロバイダー	Cloud Directory
サインイン
登録
パスワードを忘れた場合
パスワードの変更
アカウントの詳細

認証が成功すると、App ID によって、暗号化されたアクセス・トークンと ID トークンが含まれたセッション Cookie が作成されます。アプリは、この Cookie を認証に使用できます。このフローをカスタマイズするもう 1 つの方法は、アクセス・トークンをブラウザーに送信して、ブラウザー・アプリが Ajax 要求でそのトークンを使用できるようにする方法です。

ログイン・ウィジェットは動的です。外観や ID プロバイダー構成をカスタマイズでき、変更はすぐに適用されます。アプリケーション・コードを更新したりアプリを再デプロイしたりする必要はありません。

ログイン・ウィジェットに用意されている以上のカスタマイズが必要ですか? ユーザーのサインイン、登録、パスワードのリセットなどのフローのために全面的にカスタマイズした独自の UI を実装して、アプリ固有のエクスペリエンスを構築できます。まずは、アプリのブランド設定を参照してください。

画面をカスタマイズするには、以下のようにします。

App ID サービス・ダッシュボードを開きます。
**「ログインのカスタマイズ」**セクションを選択します。ログイン・ウィジェットの外観を自社のブランドに合うように変更できます。
ローカル・システムにある PNG ファイルまたは JPG ファイルを選択し、自社のロゴをアップロードします。推奨される画像サイズは 320 x 320 ピクセルです。ファイルの最大サイズは 100 KB です。
ウィジェットのヘッダー・カラーをカラー・ピッカーから選択するか、または別のカラーの 16 進コードを入力します。
プレビュー・ペインでカスタマイズを検査し、問題がなければ**「変更を保存」**をクリックします。確認メッセージが表示されます。
ブラウザーでログイン・ページを最新表示し、変更内容を確認します。

AndroidクライアントSDKを使って、あらかじめ設定された画面を呼び出すことができます。

以下のコマンドをコードに挿入します。

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
      }
   });

コンソールでCloud Directoryの設定を行います。 **「ユーザーがアプリケーションにサインアップできるようにする」と「ユーザーがアプリケーションからアカウントを管理できるようにする」の両方を「オン」**に設定する必要があります。

アプリに以下のコードを追加します。ユーザーがカスタム画面からアプリに登録すると、登録フローが開始されます。以下の呼び出しは、ユーザーを登録できるだけではなく、Cloud Directory の構成によっては、登録を完了するための確認 E メールを送信することもできます。

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
         }
   }
});

コンソールでCloud Directoryの設定を行います。 **「ユーザーがアプリケーションからアカウントを管理できるようにする」を「オン」**に設定する必要があります。
サービス・ダッシュボードの**「パスワードの再設定」タブで、「パスワード再設定の E メール」が「オン」**に設定されていることを確認します。

アプリに以下のコードを追加します。ユーザーがアプリケーションで「パスワードを忘れた場合」をクリックすると、SDK は forgot_password API を呼び出して、パスワードを再設定できるようにするための E メールをユーザーに送信します。

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.
   }
});

コンソールでCloud Directoryの設定を行います。 **「ユーザーがアプリケーションにサインアップできるようにする」と「ユーザーがアプリケーションからアカウントを管理できるようにする」の両方を「オン」**に設定する必要があります。
サービス・ダッシュボードの**「パスワード変更済み」タブで、「パスワード変更通知 E メール」**を次のように設定します。

ログイン・ウィジェットを呼び出して詳細変更フローを開始します。

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
   }
});

コンソールでCloud Directoryの設定を行います。 **「ユーザーがアプリケーションにサインアップできるようにする」と「ユーザーがアプリケーションからアカウントを管理できるようにする」の両方を「オン」**に設定する必要があります。

以下のコードをアプリに配置して、パスワード変更フローを開始します。

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
   }
});

iOS Swift クライアントSDKを使用して、事前に設定された画面を呼び出すことができます。

以下のコマンドをコードに挿入します。

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())

コンソールでCloud Directoryの設定を行います。 **「ユーザーがアプリケーションにサインアップできるようにする」と「ユーザーがアプリケーションからアカウントを管理できるようにする」の両方を「オン」**に設定する必要があります。

以下のコードをアプリケーションに挿入します。ユーザーがアプリケーションに登録しようとすると、ログイン・ウィジェットが呼び出され、カスタム登録ページが表示されます。

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())

コンソールでCloud Directoryの設定を行います。 **「ユーザーがアプリケーションからアカウントを管理できるようにする」を「オン」**に設定する必要があります。
サービス・ダッシュボードの**「パスワードの再設定」タブで、「パスワード再設定の E メール」が「オン」**に設定されていることを確認します。

以下のコードをアプリケーションに挿入します。いずれかのアプリ・ユーザーがパスワードの更新を要求すると、ログイン・ウィジェットが呼び出され、プロセスが開始します。

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())

コンソールでCloud Directoryの設定を行います。 **「ユーザーがアプリケーションにサインアップできるようにする」と「ユーザーがアプリケーションからアカウントを管理できるようにする」の両方を「オン」**に設定する必要があります。
サービス・ダッシュボードの**「パスワード変更済み」タブで、「パスワード変更通知 E メール」**を次のように設定します。

ログイン・ウィジェットを呼び出して詳細変更フローを開始します。

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())

コンソールでCloud Directoryの設定を行います。 **「ユーザーがアプリケーションにサインアップできるようにする」と「ユーザーがアプリケーションからアカウントを管理できるようにする」の両方を「オン」**に設定する必要があります。

以下のコードをアプリに配置して、パスワード変更フローを開始します。

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())

Node.js サーバー SDK を使用して、事前に設定された画面を呼び出すことができます。

ユーザー名とパスワードのパラメーターを使用して呼び出せる post ルートをアプリに追加し、リソース所有者のパスワードを使用してログインします。

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 により、ユーザーはユーザー名とパスワードを使用して Web アプリにサインインできます。ログインに成功すると、ユーザーのアクセス・トークンは HTTP セッションに保管され、セッション中は使用可能です。 HTTP セッションが破棄されるか期限切れになると、トークンは無効になります。

コンソールでCloud Directoryの設定を行います。 **「ユーザーがアプリケーションにサインアップできるようにする」と「ユーザーがアプリケーションからアカウントを管理できるようにする」の両方を「オン」**に設定する必要があります。
以下のコードをアプリケーションに挿入します。ユーザーがアプリケーションに登録しようとすると、ログイン・ウィジェットが呼び出され、カスタム登録ページが表示されます。
```
app.get("/sign_up", passport.authenticate(WebAppStrategy.STRATEGY_NAME, {
successRedirect: LANDING_PAGE_URL,
show: WebAppStrategy.SIGN_UP
}));
```

コンソールでCloud Directoryの設定を行います。 **「ユーザーがアプリケーションからアカウントを管理できるようにする」を「オン」**に設定する必要があります。
サービス・ダッシュボードの**「パスワードの再設定」タブで、「パスワード再設定の E メール」が「オン」**に設定されていることを確認します。
以下のコードをアプリケーションに配置して、show プロパティーを WebAppStrategy.FORGOT_PASSWORD に渡します。ユーザーがアプリへのパスワードの更新を要求すると、ログイン・ウィジェットが呼び出され、プロセスが開始します。
```
app.get("/forgot_password", passport.authenticate(WebAppStrategy.STRATEGY_NAME, {
successRedirect: LANDING_PAGE_URL,
show: WebAppStrategy.FORGOT_PASSWORD
}));
```

コンソールでCloud Directoryの設定を行います。 **「ユーザーがアプリケーションにサインアップできるようにする」と「ユーザーがアプリケーションからアカウントを管理できるようにする」の両方を「オン」**に設定する必要があります。
サービス・ダッシュボードの**「パスワード変更済み」タブで、「パスワード変更通知 E メール」**を次のように設定します。
以下のコードをアプリケーションに配置して、show プロパティーを WebAppStrategy.FORGOT_PASSWORD に渡し、詳細変更フォームを起動します。
```
app.get("/change_details", passport.authenticate(WebAppStrategy.STRATEGY_NAME, {
successRedirect: LANDING_PAGE_URL,
show: WebAppStrategy.CHANGE_DETAILS
}));
```

コンソールでCloud Directoryの設定を行います。 **「ユーザーがアプリケーションにサインアップできるようにする」と「ユーザーがアプリケーションからアカウントを管理できるようにする」の両方を「オン」**に設定する必要があります。
サービス・ダッシュボードの**「パスワード変更済み」タブで、「パスワード変更通知 E メール」**を次のように設定します。
以下のコードをアプリケーションに配置して、show プロパティーを WebAppStrategy.FORGOT_PASSWORD に渡し、詳細変更フォームを起動します。
```
app.get("/change_password", passport.authenticate(WebAppStrategy.STRATEGY_NAME, {
successRedirect: LANDING_PAGE_URL,
show: WebAppStrategy.CHANGE_PASSWORD
}));
```

ログイン・ウィジェットの使用

ログイン・ウィジェットの使用

ログイン・ウィジェットについて

ログイン・ウィジェットのデフォルトの動作

各プロバイダーで表示できる画面はどれですか?

SSO ログイン・フローのカスタマイズ

ログイン・ウィジェットのカスタマイズ

Android SDK を使用したログイン・ウィジェットの表示

登録

パスワードを忘れた場合

詳細の変更

パスワードの変更

iOS Swift SDK を使用したログイン・ウィジェットの表示

登録

パスワードを忘れた場合

詳細の変更

パスワードの変更

Node.js SDK を使用したログイン・ウィジェットの表示

登録

パスワードを忘れた場合

詳細の変更

パスワードの変更