webでapple sigin in
webでapple sigin in
最近webでapple sigin inできるように機能追加を行いましたので、
そこでのtipsを共有致します。
このタスクの経緯
そもそもの経緯としましては、わたしが関わっているサービスにはスマホapp版とweb版の両方があり、双方問題なく稼働していました。
そんなある日appleでスマホappを更新しようとすると、弾かれてしまったのです、
その理由は「apple sign in」が無いから。
急ぎapp側でapple sign inを実装したのですが、
そうすると今度は、app側でapple sign inした人がPCでアクセスした時にログインできなくなってしまう問題が、
そうしてわたしの元にwebでapple sign inを実装するタスクが割り当てられたのです。
apple sign inとは
appleが「apple製品持っているんであれば、いろんなアプリ全部appleでログインできれば便利だろ？」的な思想により大号令が発せられた。
appleアカウントでのログイン機能です。
まだまだ出会う回数は少ないかもしれませんが、これからどんどんいろんなアプリで実装が必須にされることとも思われます。
apple sign inの大号令についてはこちらをご覧ください。
firebaseとは
firebaseとはgoogleの開発プラットフォームで様々な機能がありますが、簡易的なDBによく利用されます。
今回はfirebaseでドメインもDBも管理している場合でのapple sign inのやり方の説明になります。
データのフロー
1.apple sign inのボタンを押す
2.apple へのログインpopupが表示される
3.ログインをすると、appleからuser情報が指定したreturnURLへ帰ってくる
4.それをfirebaseに渡し、ログイン・新規登録を行う
5.その結果(ログイン可否)を受取る
というデータの流れになっています。
appleのIDと元ドメインが紐付いていないといけないのが、
私的にapple sign inのミソになります。
実際の動き
apple側とfirebese側の両方の登録が必要になります。
1.firebaseのURLをチェックする。
6の画面でも出てきますが、
【ドメイン】/__/auth/handle
というのがfirebaseのコールバックURLです。
2.appleでアプリを登録
3.appleでサービスIDを登録
4.サービスIDのアクセスに許可する、ドメイン・return URLを登録
5.appleでサービスIDと紐づけるkeyを登録
6.firebaseでappleでのログインを有効化
7.実際登録したドメインから試す
感想
時間がかかった割にソースコードの変更量が少なく、周囲にサボってたのでは？と映らないか心配ではございますが、ちゃんとこのコードに至るまでの経緯を説明し事なきを得ています、、、おそらく。
苦戦した点
・ライブラリを使おうとしてしまった。
・「.well-known/apple-developer-domain-association.txt」 を使うなどの情報が交錯した。
・firebaseを使った場合firebaseの上記の方法以外での連携は難しい
・日本語の資料が少ない
・apple側のUIが変わっており、英語の資料でも古い情報が多い
・ローカル環境では検証ができない(firebaseのドメイン指定があるため)
・以下の条件がかなり稀なようで、英語でも資料が少なかった。
1.webでapple sigin in
2.firebase使用
3.react redux使用
to be better
もっと徹底的にやるのであれば。
外部ツールを使ってのセキュリティのチェックや、
しっかりテストコードを書いてこのzennに載せたりできれば理想的が、
工数の関係もあり今回はそこまではやっておりません。
参考資料
Discussion