IonicとAWS CognitoとFacebook認証連携（前編）

プログラミングの話です。興味ない人は読まないほうがいいです（笑）

Ionicを使って携帯アプリを色々と開発しておりますが、いつも認証周りは鬼門なのでここらで一発AWS Cognitoを活用してみようと思い数日間試行錯誤しておりました。実現したいのは

• アプリケーションへのログインにFacebook認証を使う
• 認証済ユーザにはAmazon Web Serviceのリソースへのアクセス権を一時的に与える
• 携帯側はIonicで開発

この3点です。

ちょっと前（といっても一昨年くらいか）までは、このような場合にはCordovaのInApp Browserで認証させて、http://localhostにコールバックかましてトークンを取り出して、なんていうのが定番でしたが、もうそんな時代じゃないのですね。

• Googleは公式にInApp Browserでの認証を拒否するようになっている
• ユーザがMulti Factor Authenticationを選択しているとInApp Browserでの実装がキツい

じゃあどうするのよ、って調べるとどうやら@ionic-native/facebookというのを使えば良い模様。あとは@ionic-native/facebookとAWS Cognitoを連携させるだけですね。楽勝でしょこんなの。（注: 楽勝=StackoverflowやQiitaもしくはGithubの事例を参考にすれば出来上がり）

ところが...

意外にもこの組み合わせを試した事例が少ない。そもそもAmazonのドキュメントを漁ってもCognito User PoolにおけるFederation Identity Providerと、Cognito Identity PoolにおけるAuthentication Providerの役割を明確にしたものが見当たらず、色々と試行錯誤の連続でありました。最も参考になったのはaws-cognito-ionic2というプロジェクトでしたが、おそらくこの作者もFacebookやTwitterの認証連携は実装していないと思われます。(このCloseされたIssueでそう推察しました。だってIt's just a matter of adding additional buttons and some code では実装できないから)

今回頭を悩ませたのは以下の問題です。

• Cognito User Poolは「User ID」「Password」が必須であり、オプションでEmail等も管理できる。
• Federated Loginが返してくる情報には「User ID」に使えそうなものはあるが、Passwordはついてくるはずないし、Emailももらえないのが普通。（嘘だと思ったらTwitterやFacebookのOauth戻り値を見よ）
• かような状況で、Federated Loginの結果からCognito Userを生成できるのか？

実際に悩んでいる人はいるようで、Facebook認証はうまくいくのにgetCurrentUser()がNullを返すという質問がStackoverflowに上がってました。これに対する回答は「お前は何を言ってるんだ？」的な内容で、思わず▼ボタンをクリックしましたが私にはカルマが足りないのでマイナス評価を付けることはできませんでした。

私が出した結論は（間違ってるかもしれませんが）「Federated Loginの結果、User Poolに新規ユーザレコードが生成されることはない」です。Cognitoの設定画面にはAttribute Mappingの設定もあり、いかにもFederated LoginからUser Poolにシームレス連携()ができるような雰囲気が醸し出されてますが、これは罠です。きっとそうです。違う！という人は是非ご指摘をお願いします。

あ～話が長くなりました。年取るとこれだからダメですよね。

ということで、今回は@ionic-native/facebookを使って認証する部分までの実験結果です。ソースは小生の作りかけばかりのGithubに入ってます。Tag=MVP2からダウンロードするなりForkするなりしてください。

以下、設定でのメモ。

Facebookアプリの設定

• AndroidとiOSの両方を設定すること
• その際、Ionicアプリのconfig.xmlにあるバンドルIDをFacebook側に登録しておくこと
• 要は@ionic-native/facebookのインストール方法に従うこと
• Android用設定でkeytoolコマンドを使う場面がありますが、これはJava SDKについてくるコマンドです。
• OAuth Callbackは今の時点では適当に設定しておいて大丈夫です

AWS Cognitoの設定

• 後編で設定します

IonicのsidemenuにFacebook認証ボタンを付けただけですが、まずはLogin/Logoutできるようになりました。後編ではAWS Cognito（のIdentity Pool）との連携について書きます。