IBM Cloud Docs
Web アプリ

Web アプリ

Web アプリケーションを開発する際に、IBM Cloud® App ID Web フローを使用して、ユーザーを安全に認証できます。 これによりユーザーは、Web アプリ内にあるサーバー・サイドの保護コンテンツにアクセスできるようになります。

フローについて

Web アプリでは、保護コンテンツにアクセスするために、しばしばユーザーの認証を要求します。App ID は、OIDC 許可コード・フローを使用して、ユーザーを安全に認証します。 このフローでは、ユーザーが認証されると、アプリは許可コードを受け取ります。 次いでそのコードは、アクセス・トークン、識別トークン、およびリフレッシュ・トークンに交換されます。 コードでは、トークンの交換ステップは常にアプリとOIDCサーバー間の安全なバックチャネルを使用して送信されます。 このプロセスは、攻撃者がトークンを傍受することができないため、セキュリティの別のレイヤーを提供する。 これらのトークンは、ユーザー認証のために、アプリケーションをホストしている Web サーバーに直接送信できます。

ウェブアプリのリクエストフロー
ウェブアプリのリクエストフロー

  1. ユーザーは、App ID SDK または API を介して /authorization エンドポイントに要求を送信することにより、許可フローを開始します。

  2. ユーザーが許可されていない場合、App ID へのリダイレクトによって認証フローが開始します。

  3. ユーザーの /authorization 要求パラメーターまたは ID プロバイダー構成に応じて、ユーザーのブラウザー内でログイン・ウィジェットを開始します。

  4. ユーザーは、認証を行う ID プロバイダーを選択し、サインイン・プロセスを実行します。

  5. ID プロバイダーは、許可コードと共にクライアント・アプリにリダイレクトします。

  6. App ID SDK は、許可コードを、App ID サービスからのアクセス・トークン、識別トークン、およびオプションのリフレッシュ・トークンに交換します。

  7. それらのトークンが App ID SDK によって保存され、クライアント・アプリケーションへのリダイレクトが行われます。

  8. ユーザーはアプリへのアクセス権限を付与されます。

Node.js SDK の構成

App ID で、Node.js Web アプリケーションを操作するための構成を行います。

開始前に

以下の前提条件を満たしている必要があります。

  • App ID サービスのインスタンス
  • サービス資格情報のセット
  • NPM バージョン 4 以上
  • Node バージョン 6 以上
  • App ID サービス・ダッシュボードで設定されたリダイレクト URI

App ID を使用した Node アプリケーションの保護については、以下のビデオをご覧ください。 そして、 簡単な Node サンプルアプリを使って、自分で試してみてください。

Node.js SDK のインストール

  1. コマンド・ラインを使用して、Node.js アプリが含まれているディレクトリーに移動します。

  2. App ID サービスをインストールします。

    npm install --save ibmcloud-appid
    

Node.js SDK の初期化

  1. require ファイルに以下の server.js 定義を追加します。

    const express = require('express');
    const session = require('express-session')
    const passport = require('passport');
    const WebAppStrategy = require("ibmcloud-appid").WebAppStrategy;
    const CALLBACK_URL = "/ibm/cloud/appid/callback";
    
  2. express-session ミドルウェアを使用するように express アプリをセットアップします。

    const app = express();
    app.use(session({
       secret: "123456",
       resave: true,
       saveUninitialized: true
    }));
    app.use(passport.initialize());
    app.use(passport.session());
    

    ミドルウェアには、実稼働環境用の適切なセッション・ストレージを構成する必要があります。 詳しくは、 express.jsを参照してください。

  3. 次のいずれかの方法で資格情報を入手します。

    • App ID ダッシュボードの**「アプリケーション」タブに移動します。 リスト内にアプリケーションがない場合は、「アプリケーションの追加 (Add application)」**をクリックしてアプリケーションを作成できます。

    • /management/v4/<tenantId>/applications エンドポイントに対して POST 要求を行う。

      要求の形式:

      curl -X POST \  https://us-south.appid.cloud.ibm.com/management/v4/39a37f57-a227-4bfe-a044-93b6e6060b61/applications/ \
      -H 'Content-Type: application/json' \
      -H 'Authorization: Bearer <IAMToken>' \
      -d '{"name": "ApplicationName"}'
      

      応答の例:

      {
      "clientId": "111c22c3-38ea-4de8-b5d4-338744d83b0f",
      "tenantId": "39a37f57-a227-4bfe-a044-93b6e6060b61",
      "secret": "ZmE5ZDQ5ODctMmA1ZS00OGRiLWExZDMtZTA1MjkyZTc4MDB4",
      "name": "ApplicationName",
      "oAuthServerUrl": "https://us-south.appid.cloud.ibm.com/oauth/v4/39a37f57-a227-4bfe-a044-93b6e6060b61"
      }
      
  4. オプション: リダイレクト URI のフォーマット方法を決めます。 リダイレクトは、2 つの異なる方法でフォーマットできます。 以下のオプションのどちらも提供されていない場合、 App ID SDKは、 IBM Cloud 上で実行されているアプリの application_uri を取得し、デフォルトの接尾辞 /ibm/cloud/appid/callback を付加しようとします。

    • 新しい WebAppStrategy({redirectUri: "...."}) 内に手動で
    • redirectUri という名前の環境変数として
  5. 前述のステップで入手した情報を使用して、SDK を初期化します。

    passport.use(new WebAppStrategy({
    tenantId: "<tenantID>",
    clientId: "<clientID>",
    secret: "<secret>",
    oauthServerUrl: "<oauthServerURL>",
    redirectUri: "<appURL>" + CALLBACK_URL
    }));
    
  6. Passport にシリアライゼーションとデシリアライゼーションを構成します。 この構成手順は、複数の HTTP 要求にわたって認証済みセッション・パーシスタンスを維持するために必要です。 詳しくは パスポートのドキュメントをご覧ください。

    passport.serializeUser(function(user, cb) {
       cb(null, user);
       });
    passport.deserializeUser(function(obj, cb) {
       cb(null, obj);
       });
    
  7. server.js ファイルに以下のコードを追加して、サービス・リダイレクトを発行します。

    app.get(CALLBACK_URL, passport.authenticate(WebAppStrategy.STRATEGY_NAME));
    
  8. 以下のコード・スニペットを app.js ファイルに追加して、保護エンドポイントを登録します。

    app.get(‘/protected_resource’, passport.authenticate(WebAppStrategy.STRATEGY_NAME), function(req, res) {res.json(req.user); });
    

詳しくは、 App ID Node.js GitHub リポジトリーを参照してください。

Liberty for Java SDK の構成

App ID で、Liberty for Java Web アプリケーションを操作するための構成を行います。

開始前に

以下の前提条件を満たしている必要があります。

  • App ID サービスのインスタンス
  • サービス資格情報のセット
  • Apache Maven 3.5 以上
  • Java 1.8
  • Liberty for Java Web アプリケーション

App ID を使用した Liberty for Java アプリケーションの保護については、以下のビデオをご覧ください。 そして、 簡単な Liberty for Java サンプルアプリを使って、自分で試してみてください。

Liberty for Java SDK のインストール

  1. OpenID Connect 機能を server.xml に追加します。

    <featureManager>
       <feature>ssl-1.0</feature>
       <feature>appSecurity-2.0</feature>
       <feature>openidConnectClient-1.0</feature>
    </featureManager>
    
  2. 次の 2 つの方法のいずれかで資格情報を入手します。

    • App ID ダッシュボードの**「アプリケーション」タブに移動します。 アプリケーションがまだない場合は、「アプリケーションの追加 (Add application)」**をクリックして新しいアプリケーションを作成できます。

    • /management/v4/<tenantID>/applications エンドポイントに対して POST 要求を行う。

      要求の形式:

      curl -X POST \  https://us-south.appid.cloud.ibm.com/management/v4/39a37f57-a227-4bfe-a044-93b6e6060b61/applications/ \
      -H 'Content-Type: application/json' \
      -H 'Authorization: Bearer <IAMToken>' \
      -d '{"name": "ApplicationName"}'
      

      応答の例:

      {
      "clientId": "111c22c3-38ea-4de8-b5d4-338744d83b0f",
      "tenantId": "39a37f57-a227-4bfe-a044-93b6e6060b61",
      "secret": "ZmE5ZDQ5ODctMmA1ZS00OGRiLWExZDMtZTA1MjkyZTc4MDB4",
      "name": "ApplicationName",
      "oAuthServerUrl": "https://us-south.appid.cloud.ibm.com/oauth/v4/39a37f57-a227-4bfe-a044-93b6e6060b61"
      }
      
  3. Open ID Connect Client フィーチャーを作成し、以下のプレースホルダーを定義します。 サービス資格情報を使用してプレースホルダーに入力します。

    <openidConnectClient
       clientId='App ID client_ID'
       clientSecret='App ID Secret'
       authorizationEndpointUrl='oauthServerUrl/authorization'
       tokenEndpointUrl='oauthServerUrl/token'
       jwkEndpointUrl='oauthServerUrl/publickeys'
       issuerIdentifier='Changed according to the region'
       tokenEndpointAuthMethod="basic"
       signatureAlgorithm="RS256"
       authFilterid="myAuthFilter"
       trustAliasName="ibm.com"
    />
    
    Liberty for Java アプリケーションの OIDC 要素変数
    コンポーネント 説明
    clientID
    secret
    oauth-server-url
    ステップ 2 を完了してサービス資格情報を入手します。
    authorizationEndpointURL oauthServerURL の末尾に /authorization を追加します。
    tokenEndpointUrl

    oauthServerURL の末尾に /token を追加します。

    jwkEndpointUrl oauthServerURL の末尾に /publickeys を追加します。
    issuerIdentifier 発行者 ID の形式は &lt;region>&gt;.cloud.ibm.com になります。 使用可能なリージョンについてはこちらを参照してください。
    tokenEndpointAuthMethod "basic" を指定します。
    signatureAlgorithm "RS256" を指定します。
    authFilterid 保護するリソースのリスト。
    trustAliasName トラストストア内の証明書の名前。

Liberty for Java SDK の初期化

  1. server.xml ファイルで、保護リソースを指定するための許可フィルターを定義します。 フィルターが 定義されていない場合、サービスはすべてのリソースを保護する。

    <authFilter id="myAuthFilter">
       <requestUrl id="myRequestUrl" urlPattern="/protected_resource" matchType="contains"/>
    </authFilter>
    
  2. 特別なサブジェクト・タイプを ALL_AUTHENTICATED_USERS として定義します。

    <application type="war" id="ProtectedServlet" context-root="/appidSample" location="${server.config.dir}/apps/libertySample-1.0.0.war">
       <application-bnd>
             <security-role name="myrole">
                <special-subject type="ALL_AUTHENTICATED_USERS"/>
             </security-role>
       </application-bnd>
    </application>
    
  3. libertySample-1.0.0.warGitHub をダウンロードし、サーバーのappsフォルダに置いてください。 例えば、サーバーの名前が defaultServer である場合、war ファイルは target/liberty/wlp/usr/servers/defaultServer/apps/ に置かれます。

  4. 以下の内容を server.xml ファイルに追加して、SSL を構成します。 トラストストアも作成する必要があります。

       <keyStore id="defaultKeyStore" password="myPassword"/>
       <keyStore id="appidtruststore" password="Liberty" location="${server.config.dir}/mytruststore.jks"/>
       <ssl id="defaultSSLConfig" keyStoreRef="defaultKeyStore" trustStoreRef="appidtruststore"/>
    

デフォルトで、SSL 構成では、トラストストアを OpenID Connect 用に構成する必要があります。 Libertyでの OpenID Connect Clientの設定についてはこちらをご覧ください。

Spring Boot for Java SDK の構成

Spring Boot アプリケーションと連携するように App ID を構成できます。

開始前に

以下の前提条件を満たしている必要があります。

  • App ID サービスのインスタンス
  • サービス資格情報のセット
  • Java + Maven プロジェクト
  • Apache Maven 3.5 以上
  • Java 1.8
  • Spring Boot 2.0 および Security OAuth 2.0 以上

Spring Boot フレームワークの初期化

  1. Maven pom.xml ファイルの <project> </project> タグの間に以下のコードを追加します。

    <parent>
       <groupId>org.springframework.boot</groupId>
       <artifactId>spring-boot-starter-parent</artifactId>
       <version>2.0.2.RELEASE</version>
       <relativePath/>
    </parent>
    
  2. Maven pom.xml ファイルに以下の依存関係を追加します。

    <dependencies>
       <dependency>
             <groupId>org.springframework.boot</groupId>
             <artifactId>spring-boot-starter-web</artifactId>
       </dependency>
       <dependency>
             <groupId>org.springframework.boot</groupId>
             <artifactId>spring-boot-starter-security</artifactId>
       </dependency>
       <dependency>
             <groupId>org.springframework.security.oauth.boot</groupId>
             <artifactId>spring-security-oauth2-autoconfigure</artifactId>
             <version>2.0.0.RELEASE</version>
       </dependency>
    </dependencies>
    
  3. 同じファイル内に Maven プラグインを入れます。

    <plugin>
       <groupId>org.springframework.boot</groupId>
       <artifactId>spring-boot-maven-plugin</artifactId>
    </plugin>
    

OAuth2 の初期化

  1. 以下のアノテーションを Java ファイルに追加します。

    @SpringBootApplication
    @EnableOAuth2Sso
    
  2. WebSecurityConfigurerAdapter を使用してクラスを拡張します。

  3. セキュリティー構成をオーバーライドし、保護エンドポイントを登録します。

       @Override
       protected void configure(HttpSecurity http) throws Exception {
          http.authorizeRequests()
                   .antMatchers("/protected_Resource").authenticated()
                   .and().logout().logoutSuccessUrl("/").permitAll();
       }
    

資格情報の追加

  1. 次のいずれかの方法で資格情報を入手します。

    • App ID ダッシュボードの**「アプリケーション」タブに移動します。 アプリケーションがまだない場合は、「アプリケーションの追加 (Add application)」**をクリックして新しいアプリケーションを作成できます。

    • /management/v4/<tenantID>/applications エンドポイントに対して POST 要求を行う。

      要求の形式:

      curl -X POST \  https://us-south.appid.cloud.ibm.com/management/v4/39a37f57-a227-4bfe-a044-93b6e6060b61/applications/ \
      -H 'Content-Type: application/json' \
      -H 'Authorization: Bearer <IAMToken>' \
      -d '{"name": "ApplicationName"}'
      

      応答の例:

      {
      "clientId": "111c22c3-38ea-4de8-b5d4-338744d83b0f",
      "tenantId": "39a37f57-a227-4bfe-a044-93b6e6060b61",
      "secret": "ZmE5ZDQ5ODctMmA1ZS00OGRiLWExZDMtZTA1MjkyZTc4MDB4",
      "name": "ApplicationName",
      "oAuthServerUrl": "https://us-south.appid.cloud.ibm.com/oauth/v4/39a37f57-a227-4bfe-a044-93b6e6060b61"
      }
      
  2. application.yml 構成ファイルを /springbootsample/src/main/resources/ ディレクトリーに追加します。 サービス資格情報からの情報を使用して、構成を完成させることができます。

    security:
    oauth2:
       client:
       clientId: <clientID>
       clientSecret: <clientSecret>
       accessTokenUri: <oauthServerURL>/token
       userAuthorizationUri: <oauthServerURL>/authorization
       resource:
       userInfoUri: <oauthServerURL>/userinfo
    

他の言語での App ID の使用

OIDC 準拠のクライアント SDK では、App ID を他の言語で使用できます。 詳しくは 認定図書館リストをご覧ください。

次のステップ

App ID がアプリケーションにインストールされたので、ユーザーの認証を開始する準備がほとんどできています。 次に、以下のいずれかの作業を行ってください。