クイック・スタート: Node.js Web アプリ

App ID を利用すると、Node.js フロントエンド Web アプリケーションを容易に保護できます。このガイドを使えば、簡単な認証フローを20分もかからずに立ち上げることができる。

以下の図を参照して、許可コード OAuth 2.0 ワークフローを確認してください。

Node.js アプリケーション認可フローアプリケーション・フロー — Node.js

ユーザーが、保護されている Web アプリケーションにアクセスしようとしますが、そのユーザーは許可されていません。
アプリケーションは、ユーザーを App ID にリダイレクトします。
App ID が、ユーザーが認証に使用できるサインイン画面を示します。
ユーザーがユーザー名やパスワードなどの資格情報を入力します。 App ID がその資格情報を検証します。
App ID は、認可コードを付与してユーザーをアプリケーションにリダイレクトします。
アプリケーションが、その認可コードを使用して、ユーザーが検証されていることを確認する要求を App ID に発行します。アクセス・トークンの取得方法について詳しくは、トークンの取得を参照してください。
App ID が、検証されたユーザーのアクセス・トークンと識別トークンを返します。
ユーザーはアプリケーションへのアクセスを許可されます。

ビデオのチュートリアル

以下のビデオを視聴すると、App ID を使用してシンプルな Node.js Web アプリケーションを保護する方法を確認できます。ビデオで扱われている情報はすべて、このページにも記載されています。

フローを試すことができるアプリがありませんか? App ID には、単純な Node.js Web サンプル・アプリが用意されています。

開始前に

Node.js Web アプリケーションで App ID の使用を開始する前に、以下の前提条件を満たしている必要があります。

この SDK は、ロギングに log4js パッケージを使用します。デフォルトでは、ロギング・レベルは infoに設定されています。独自のロギング構成を作成するには、log4js.json ファイルを追加し、process.env.LOG4JS_CONFIG 環境変数を JSON ファイルに設定します。

リダイレクト URI を登録する

リダイレクト URI は、アプリのコールバック・エンドポイントです。サインイン・フローでは、App ID が、許可ワークフローにクライアントが参加することを許可する前に URI を検証します。これは、フィッシング攻撃と認可コード漏えいを防ぐのに役立ちます。 URI を登録することで、その URI が信頼できる URI であり、ユーザーをリダイレクトしてよいことを App ID に認識させます。

**「認証の管理 (Manage Authentications)」>「認証設定 (Authentication Settings)」**をクリックします。
**「Web リダイレクト URI の追加」**フィールドに URI を入力します。リダイレクトを成功させるには、どの URI も http:// または https:// で始め、照会パラメーターを含めた絶対パスを指定しなければなりません。
**「Web リダイレクト URI の追加 (Add web redirect URIs)」**ボックス内の + 記号をクリックします。
考えられる URI をすべてリストに追加するまで、ステップ 1 から 3 を繰り返します。

資格情報を取得する

次の 2 つの方法のいずれかを利用して、資格情報を取得できます。

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

/management/v4/<tenantID>/applications エンドポイントに POST リクエストを行う。

 Request format:

 ```sh {: codeblock}
 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"}'
 ```
 Example response:

 ```json {: screen}
 {
   "clientId": "xxxxx-34a4-4c5e-b34d-d12cc811c86d",
   "tenantId": "xxxxx-9b1f-433e-9d46-0a5521f2b1c4",
   "secret": "ZDk5YWZkYmYt*******",
   "name": "app1",
   "oAuthServerUrl": "https://us-south.appid.cloud.ibm.com/oauth/v4/xxxxx-9b1f-433e-9d46-0a5521f2b1c4",
   "profilesUrl": "https://us-south.appid.cloud.ibm.com",
   "discoveryEndpoint": "https://us-south.appid.cloud.ibm.com/oauth/v4/xxxxxx-9b1f-433e-9d46-0a5521f2b1c4/.well-known/openid-configuration"
 }
 ```

SDK の初期化

App ID を使用する最も簡単な方法は、Node.JS SDK を利用する方法です。

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

以下の NPM 要件をインストールします。

npm install --save express express-session passport log4js pug

App ID サービスをインストールします。
```
npm install --save ibmcloud-appid
```

以下の要件を server.js ファイルに追加します。

const express = require('express'); 								// https://www.npmjs.com/package/express
const log4js = require('log4js');                                   // https://www.npmjs.com/package/log4js
const session = require('express-session');							// https://www.npmjs.com/package/express-session
const passport = require('passport');								// https://www.npmjs.com/package/passport
const WebAppStrategy = require('ibmcloud-appid').WebAppStrategy;	// https://www.npmjs.com/package/ibmcloud-appid

ステップ 1 で取得した資格情報を使用して、express-session ミドルウェアを使用するようにアプリケーションをセットアップします。リダイレクト URI の形式を設定する方法は 2 つあります。コード例に示すように、手動で新規の WebAppStrategy({redirectUri: "...."}) を使用する方法と、環境変数として値を設定する方法です。
```
const app = express();
const logger = log4js.getLogger("testApp");
app.use(session({
   secret: '123456',
   resave: true,
   saveUninitialized: true
}));
app.use(passport.initialize());
app.use(passport.session());
passport.serializeUser((user, cb) => cb(null, user));
passport.deserializeUser((user, cb) => cb(null, user));
passport.use(new WebAppStrategy({
   tenantId: "<tenantID>",
   clientId: "<clientID>",
   secret: "<secret>",
   oauthServerUrl: "<oauthServerURL>",
   redirectUri: "<redirectURI>"
}));
```
ミドルウェアには、実稼働環境用の適切なセッション・ストレージを構成する必要があります。詳しくは、 express.js のドキュメントをご覧ください。

アプリケーションを保護する

App ID をインストールしたので、アプリケーションを保護する準備はできています。 Web アプリ戦略を定義して、アプリケーション全体を保護するか特定のリソースのみを保護するかを選択できます。

コールバック・エンドポイントを構成します。コールバックは、App ID からアクセス・トークンと識別トークンを受け取り、ユーザーを次のいずれかの場所にリダイレクトして許可プロセスを完了させます。
- 認証をトリガーした要求の元の URL。これは WebAppStrategy.ORIGINAL_URL として HTTP セッションの間保持されます。
- 認証が成功した場合のリダイレクトを指定する。
- 次の手順に示しているアプリケーション・ルート (/)。
```
app.get(CALLBACK_URL, passport.authenticate(WebAppStrategy.STRATEGY_NAME));
```
常にブラウザーをログイン・ウィジェットにリダイレクトするサインイン・エンドポイントを設定します。認証の無限ループにならないように、必ず成功リダイレクト・オプションを追加してください。
```
app.get('/appid/login', passport.authenticate(WebAppStrategy.STRATEGY_NAME, {
   successRedirect: '/',
   forceLogin: true
}));
```

アプリをパーソナライズする

ID プロバイダーから提供される情報をプルして、アプリ・エクスペリエンスをパーソナライズすることができます。

ユーザー情報を取得するようにアプリケーションを構成します。protected は、アプリケーションのエンドポイントに合わせて変更可能なプレースホルダー変数です。
```
app.get("/protected_resource", passport.authenticate(WebAppStrategy.STRATEGY_NAME), function(req, res){
   res.json(req.user);
});
```
例えば、サンプル・アプリケーションで、アプリケーションをパーソナライズするためにユーザー名を取得する方法を確認できます。
```
app.get('/api/user', (req, res) => {
   // console.log(req.session[WebAppStrategy.AUTH_CONTEXT]);
   res.json({
      user: {
            name: req.user.name
      }
   });
});
```

構成のテスト

許可構成をテストするには、アプリケーションで定義したサーバーの listen URL にナビゲートします。サインインして、サインアウトしてみてください。期待したとおりに構成が機能していることを確認します。

次のステップに進む準備ができたら、Cloud Directory の多要素認証を有効にしたり、カスタム属性を追加してアプリをさらにパーソナライズしたりしてみてください。