AWS CognitoとなんちゃってOpenID ConnectサーバをIDフェデレーションする

ずいぶん前に、なんちゃってOpenID Connectサーバを自作しました。

　[なんちゃってOAuth2/OpenID Connectサーバを自作する](https://qiita.com/poruruba/items/042adba2ac9a34839546)

今回は、AWS Lambdaを使って実際に立ち上げてみたのち、CognitoのIDフェデレーションを使って、Cognitoから自作のOpenID ConnectにつないでID連携してみます。

ソース一式は以下に置きました。
　https://github.com/poruruba/openid_server.git

# AWS LambdaでOpenID Connectを立ち上げる

なんちゃってOpenID Connectの説明は、当時の投稿を見ていただくとして、手っ取り早く、Gitからソース一式をダウンロードしてください。

```
> git clone https://github.com/poruruba/openid_server.git
> cd openid_server
```

オレオレ証明書を使うので、先に、以下を実行して公開鍵ペアを作成します。

```
> mkdir api\controllers\oauth2\jwks
> openssl genrsa -out api\controllers\oauth2\jwks\privkey.pem 2048
```

注意事項があります。
生成されたprivkey.pemの改行コードはLFである必要があります。（そうしないとnpmモジュールのrsa-pem-to-jwkが失敗しました。私はこれではまりました）

とりあえず以下で、なんちゃってOpenID Connectサーバが立ち上がるかと思います。

```
> npm install
> node app.js
```
.envに何も指定していなければ、ポート10080で立ち上がっているはずです。

## 試してみる

ブラウザから、以下を開いてみましょう。

　http://localhost:10080/login

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/c742a7bb-329a-1e08-ea32-6dc7793630e2.png)
 

さっそく、認証してみましょう。
client_id、scope、stateに適当な値を入れて、「サインイン開始」ボタンを押下しましょう。（なんちゃってサーバなので、値は何も見ていないのです。。）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/7b9233e7-1cc9-c640-e128-2f3abb9ecfd2.png)

ログインページが表示されます。
ここでも、ユーザID・パスワードには適当に値をいれて、「サインイン」ボタンを押下します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/4356d95d-f303-8a46-558e-0e7cf43a3a73.png)

ログインが成功し、なんちゃってIDトークンとアクセストークンが生成されました！
フローを図で示しておきます。
一番最初のページで、response_typeをtokenにした時とcodeにした時でちょっとフローが異なります。
（response_type=codeにおいて、本来ならセキュリティ上アプリクライアントシークレットやトークンはブラウザに渡ることがないように実装しますが、今回はわかりやすさを優先していますので、ご注意ください）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/0b5e5aca-003e-68fd-dfb5-bdcc5bd84665.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/0b62c1db-a94e-4bd6-01cc-dded4c5de48c.png)

できたトークンを以下のサイトで内容を確認できます。

　https://jwt.io

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/b3e2269e-e822-6576-d44d-f4136991df28.png)

# AWS API Gateway＋Lambdaで立ち上げる

## LambdaアップロードのためのZIPファイルを作成する

上記のようなローカルホストに立ち上げてもよいのですが、HTTPSで接続したいので、API Gateway＋Lambdaで立ち上げてみます。
（独自にHTTPSで立ち上げられる場合はこの作業は不要です。）

LambdaにZIPで固めてアップロードします。

```
> cd api\controllers\oauth2
> npm init -y
> npm install --save rsa-pem-to-jwk
> npm install --save jsonwebtoken
> mkdir helpers
> cp ..\..\helpers\response.js helpers\response.js
> cp ..\..\helpers\redirect.js helpers\redirect.js
```

最後に、oauth2フォルダにあるファイルとフォルダ一式をZIPファイルに固めます。例えばindex.zipとします。

## LambdaにZIPファイルをアップロードする

それでは、Lambda関数を作成しZIPファイルをアップロードします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/98a93c61-f431-e9c9-cca4-a8f7613e3e4a.png)

適当に、test-oauth2 という名前の関数にしました。
アップロードしてみましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/2d6b1be7-d912-3b8c-8b19-a883557c2e21.png)

こんな感じでアップロードできました。
node_modulesやjwks、helpersも一緒にアップロードされました。

最後に、環境変数で、HELPER_BASEとして「./helpers/」と設定します。
また、オレオレ証明書のファイルの場所がLambdaからは違って見えるので以下のようにソースコードを修正します。

```
var priv_pem = fs.readFileSync('./api/controllers/oauth2/jwks/privkey.pem');
→
var priv_pem = fs.readFileSync('./jwks/privkey.pem');
```

※swagger_nodeとlambdaで多少動きが違うところがあり、トークンエンドポイントにおけるBody部の解釈が異なるようです。

```js:index.js
・・・
    if( event.path == '/oauth2/token'){
        // Lambda＋API Gatewayの場合はこちら
        var params = new URLSearchParams(event.body); 
        // swagger_nodeの場合はこちら
        // var params = Object.entries(JSON.parse(event.body)).reduce((l,[k,v])=>l.set(k,v), new Map()); 
・・・
```

いくつか環境に合わせて修正が必要なのですが、とりあえず、API Gatewayの作成に移ります。

## API GatewayでAPIを作成する

API Gatewayに新しいAPIを作成します。
新しいAPIの作成のチェックボックスは、「Swaggerからインポート」を選択します。
そして、エディットボックスに、api\swagger\swagger.yamlのファイルの内容をコピペします。
そして、「インポート」ボタンを押下します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/d7ce0de7-1e4d-a165-ecbc-36dcc7cf402c.png)

途中警告が出ますが、「インポートして警告を無視する」ボタンを押下して、インポートを継続します。一部API Gatewayではサポートしていないものがあるためです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/5c0a215d-f478-3c5b-225d-245aefd20160.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/05c9b43b-eb41-90af-0774-3a9956dcf9a5.png)

まず、/swaggerは使わないので削除します。
次に、各GETやPOSTに、先ほど作ったLambda関数「test-oauth2」を割り当てます。
このとき、Lambdaプロキシ統合の使用のチェックボックスをOnにしてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/812ee97c-fb79-58df-fdfd-07baaa483ccc.png)

次に、各GETやPOSTに対して、CORSを有効化します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/981d92cb-fbf6-c4d9-fb17-2366fb8bbbf5.png)

最後に、デプロイします。
ステージ名はv1としてみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/2ec93f16-2b47-eaec-7012-47bb2a20cd29.png)

これで、デプロイされ、URLが割り当たりました。以下の感じになっていると思います。このURLを覚えておきます。

　https://*****.execute-api.ap-northeast-1.amazonaws.com/v1

次に、test-oauth2のLambda関数に戻ります。

環境変数で、BASE_URLとして先ほどのAPI Gatewayで割り当たったURLを設定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/a13ed9bc-2dec-f504-0494-501a85e17bdc.png)

## 試してみる

さっそく、Lambdaに上げたなんちゃってOpenID Connectサーバにアクセスしてみます。
アクセスには、先ほど立ち上げたローカルのサーバを使います。
start.jsとstart_login.jsとstart_redirect.jsのbase_urlをAPI GatewayのURLに変更します。
そうすることで、ローカルサーバではなく、API Gatewayに立ち上げた認証エンドポイント・トークン取得エンドポイントを呼び出すようになります。
ローカルで試した時と全く同じような動作となったかと思います。

フローにしてみると、こんな感じです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/9d2550b4-4e34-57cd-7ae6-6ff60b02e206.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/5bb00b15-997d-0274-5e6c-37fa9f1006a2.png)

# CognitoのIDフェデレーション連携してみる

Cognitoには、それ自身でユーザアカウントのサインアップ・サインインのための機能やOpenID ConnectのIDトークン/アクセストークンを生成・検証する機能提供していますが、そのアカウントとして、GoogleやLINE、YahooIDなどのソーシャルアカウントを取り込むことができます。

参考
　[AWS CognitoにGoogleとYahooとLINEアカウントを連携させる](https://qiita.com/poruruba/items/189945dc64edfe1f2464)

今回は、それと同様に、なんちゃてで立ち上げたOpenID ConnectサーバをCognitoに組み込みたいと思います。

まずは、Cognitoでユーザプールを作成します。
適当に「DummyUserPool」という名前にしました。よく使うである属性emailは標準属性として選択しておきました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/596efa75-0531-a926-7111-2ee86f4d3441.png)

あとは適当に。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/8f7dfcd0-f2d6-de97-8664-da457be2105c.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/4384902f-91bf-ddbe-7161-0f0bca1c30b8.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/163cbff5-6dc8-eee8-c0e2-e3c3d16c0c87.png)
 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/71bb5eb4-82dd-81ee-0d0d-1b08ba9c2bb5.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/85d6ffe5-8062-7d87-dd9b-f19438df24d2.png)

とりあえず、アプリクライアントは後で作成するので、次のステップに進めます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/80d4ec19-2035-f3f5-2775-bf6d77e4e785.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/f2099343-40c8-6fb5-3cae-61f29e38cf9f.png)

ユーザプールが作成されました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/1449876c-01c4-008a-6bb9-2e47b44ff960.png)

ついでに、ドメイン名も設定しておきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/031a0352-7a0b-eeb1-7ed7-e91707d1d1d1.png)

それではさっそく、IDフェデレーションの設定をしていきます。
左のナビゲーションから、フェデレーションのIDプロバイダを選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/1e176621-8476-7d52-f4e2-b9490e6b39e9.png)

そして、当然、OpenID Connectを選択します。
設定していきますが、なんちゃってサーバは、値を見ないので、適当な値で構いません。
ただし、発行者のところは、
api\controllers\oauth2\index.jsの以下のところに指定した値にします。

```
　const issuer = process.env.ISSUER || 'https://localhost';
```

何も変えていなければ、「https://localhost」 です。(このURLに接続するわけではないのでなんでもよいですが、HTTPSである必要があります。）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/76e1bcdf-cfc9-fb6a-67d6-77f408c8718c.png)

以下は例です。

プロバイダ名：test-oauth2
クライアントID：test-client（というより、何もチェックしていないので何でもよいです）
クライアントシークレット：test-secret（というより、何もチェックしていないので何でもよいです）
属性のリクエストメソッド：GET
承認スコープ：openid profile email
発行者：https://localhost

「検出の実行」を押下します。が、反応しないので、認証エンドポイント等々の入力テキストボックスが表示されます。
以下を設定します。

認証エンドポイント：【API Gatewayで割り当てられたURL】/oauth2/authorize
トークンエンドポイント：【API Gatewayで割り当てられたURL】/oauth2/token
ユーザ情報エンドポイント：【API Gatewayで割り当てられたURL】/oauth2/userInfo
Jwks uri：【API Gatewayで割り当てられたURL】/.well-known/jwks.json

最後に、「プロバイダの作成」ボタンを押下します。

属性マッピングの設定もします。
OIDC属性として「email」、ユーザープール属性として「Email」を選択し、「変更の保存」を押下します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/ae14bf79-f2cc-d665-c393-9c93b1d5a2a1.png)

## アプリクライアントを作成する

なんちゃってOpenID Connectサーバの準備ができましたので、認証するための準備を進めます。
まずは、いつものようにアプリクライアントを作成します。「クライアントシークレットを生成」はOnにします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/372c3778-e91e-5296-e075-7f92aea042b4.png)
 
以下の感じで作成されました。
アプリクライアントIDとアプリクライアントのシークレットが割り当たりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/55a89e55-fca3-c450-776d-8ce02802e865.png)

次に、アプリクライアントの設定に移ります。
有効なIDプロバイダとして、先ほど設定したtest-oauth2を選択しておきます。ついでに、Cognito User PoolもOnにしておきましょう。後で、その意味がわかります。
コールバックURLとログアウトURLには、ローカルに立ち上げたサーバのURLを入力します。例えば、「http://localhost:10080/login/redirect.html」ってな感じです。
許可されているOAuthフローには、Authorization code grantとImplicit grantを選択しておきます。
許可されているOAuthスコープには、email、openid、profileを選択しておきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/f667d469-87d5-b4d2-9fac-22947d2cf0fa.png)

## 試してみる

それでは、さっそくCognito経由でなんちゃってOpenID Connectサーバで認証してみます。

ローカルに立ち上げたWebサーバの一部を書き換えます。

stat.jsとstart_redirect.jsのbase_urlをCognitoのドメイン名に変更します。ドメイン名は、Cognitoのアプリの統合で設定したドメインプレフィックスを含んだもので、以下の通りです。

　https://【ドメインのプレフィックス】.auth.ap-northeast-1.amazoncognito.com

start_login.jsは、変更せず、API GatewayのURLのままにします。
それでは、ブラウザから、ローカルに立ち上げたWebサーバにアクセスしてみましょう

　http://localhost:10080/login/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/da48b0ea-83db-8b00-ee1e-783d7bf34ffb.png)

まずは、response_type=codeで試してみましょう。
client_idには、Cognitoで払い出したアプリクライアントIDを指定します。
scopeには、「openid profile email」を指定します。
stateには適当でよいです。たとえば、「abcd」とでもしておきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/305cd2b4-46aa-bf68-8525-268d54146893.png)

ログイン方法として、test-oauth2とCognito User Poolの2つを選択しました。ですので、表示されたページにはどちらでログインするか選択するようになっています。もちろん、test-oauth2を選択します。

そうすると、いつものログイン画面が現れます。ユーザIDとパスワードは適当に入力します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/8d56d6b2-c61c-8167-a7a0-9093e3ee7fec.png)

リダイレクトされてきました。ブラウザのURLに、認可コードが返ってきているのがわかります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/1ac6d7c6-8e4a-04c6-11ad-f09c5080acca.png)

ここで、Cognitoで払い出されたアプリクライアントIDとアプリクライアントのシークレットを入力し、「トークン生成」ボタンを押下します。

無事に、Cognitoからトークンが払い出されました！
「userInfo」も呼び出せるようです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/db5e4fab-d303-06fa-b8eb-ede586ea6d54.png)

フローにしてみると、こんな感じです。
(ややこしーーー）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/bf9a7553-d117-315e-5c99-d87624b1e577.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/39723026-e29c-4e4d-e8b8-4729c7e1a3da.png)

以上