Web 應用程式

開發 Web 應用程式時,您可以使用 IBM Cloud® App ID Web 流程來安全地鑑別使用者。 然後,使用者可以在您的 Web 應用程式中存取伺服器端受保護內容。

瞭解流程

Web 應用程式通常需要使用者鑑別才能存取受保護的內容。App ID 使用 OIDC 授權碼流程來安全地鑑別使用者。 使用此流程,當使用者經過鑑別時,應用程式會接收到授權碼。 然後,交換存取、身分及重新整理記號的程式碼。 在程式碼中,代幣的交換步驟總是透過應用程式與 OIDC 伺服器之間的安全後端通道傳送。 由於攻擊者無法截取代幣,因此此程序提供了另一層安全性。 這些記號可以直接傳送至用於使用者鑑別的 Web 伺服器管理應用程式。

Web 應用程式請求流程
Web 應用程式請求流程

  1. 使用者會透過 App ID SDK 或 API,將要求傳送至 /authorization 端點,來起始授權流程。

  2. 如果使用者未獲授權,則會利用重新導向至 App ID 來啟動鑑別流程。

  3. 視使用者的 /authorization 要求參數或身分提供者配置而定,它會在使用者的瀏覽器中啟動「登入小組件」。

  4. 使用者會選擇身分提供者以鑑別及完成登入處理程序。

  5. 身分提供者會使用授權碼重新導向至用戶端應用程式。

  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

您可以使用 簡單的 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 應用程式,以使用 express-session 中介軟體。

    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 儀表板的應用程式標籤。 如果清單中沒有應用程式,您可以按一下新增應用程式來建立一個應用程式。

    • /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 格式化。 重新導向可以用兩種不同的方式來格式化。 如果以下兩個選項都沒有提供,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. 使用序列化及解除序列化來配置通行證。 跨 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. 將下列程式碼 Snippet 新增至 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 應用程式

您可以使用 簡單的 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. 以下列兩種方式之一取得您的認證。

    • 導覽至 App ID 儀表板的應用程式標籤。 如果您還沒有任何應用程式,可以按一下新增應用程式來建立一個新的應用程式。

    • /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 發行商識別碼的形式如下:&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.war 檔案 GitHub 並將其放入伺服器的應用程式資料夾。 例如,如果您的伺服器名稱為 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

您可以配置 App ID 以使用 Spring Boot 應用程式。

開始之前

您必須具有下列必備項目:

  • 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 儀表板的應用程式標籤。 如果您還沒有任何應用程式,可以按一下新增應用程式來建立一個新的應用程式。

    • /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 之後,您幾乎已備妥可以開始鑑別使用者了! 接下來,請嘗試執行下列其中一個動作: