8
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

ウェブ版「Sign In WIth Apple」をFirebaseで実装するには

Last updated at Posted at 2020-07-02

#はじめに
当記事は、FirebaseのAuthenticationを用いて、Apple IDでユーザーログインをする方法について記載していきます。
※記事の中でコードの紹介はしておりませんが、筆者はSwiftではなく、Javascriptで実装をした後、この記事を書いています。

Firebase公式ドキュメントがAppleの仕様変更に対応しておらず(2020年7月2日現在)、幾らか時間がかかったので、同様の実装を検討されてる方のお役に立てたら幸いです。

結論だけ先に言うと、
apple-developer-domain-association.txt
がApple側でダウンロード出来なくなっており、生成した秘密鍵の情報をFirebaseに入力することでApple IDのソーシャルログインが実装できます。

##Apple IDによるログインについて

GoogleやFacebookによる、ソーシャルログインのように、Apple IDを用いてサイトログインをすることが出来ます。
AppStoreのガイドラインによると、サードパーティやソーシャルログインのみでログイン機能を実装している全てのiOSアプリは2020年6月30日までに、Apple IDによるログインを、ログイン方法の一つとして加える必要があり、私もその流れの中で今回実装をしました。

Apple ID認証の大きな特徴としては、
・Apple IDに登録しているメールアドレスだけでなく、Appleがランダムで生成したアドレスを利用してログイン出来る(その安全性はAppleが担保)
・スマートフォン限定ですが、「顔認証」「指紋認証」によるログインが可能

以上が挙げられます。

##FIrebaseとAppleの連携
※実装にはAppleのデベロッパー登録が必要です。

######①AppleDeveloperサイトへアクセス

######②「Identifiers」の項からApp Idを作成
※法人でApple Developer登録している人は管理者権限のアカウントのみApp Id作成ボタンが表示されます

スクリーンショット 2020-07-02 11.00.01.png

通常のiOSアプリ、あるいはウェブサイトにログイン機能をつける場合は、「App」をクリック。

スクリーンショット 2020-07-02 11.05.39.png

識別情報の入力に加えて、「Sign In WIth Apple」の設定をします。
スクリーンショット 2020-07-02 11.06.26.png

######③「Identifiers」の項からService Idを作成
先ほど、App Idを作った手順と同様に、今度はService Idを作成します。

Idの登録後に再度作成したService Idをクリックすると、下記写真のような設定画面が現れます。
スクリーンショット 2020-07-01 2.34.57.png

Domeins and Subdomainsには、ログイン後にリダイレクトするサービスサイトのドメイン(例えばgoogle.comやApple.comなど)を入力。

Return URLsには、

https://YOUR_FIREBASE_PROJECT_ID.firebaseapp.com/__/auth/handler

を入力します。
FirebaseのプロジェクトIDはコンソール画面等で確認できるので、事前に控えておくと良いでしょう。

リダイレクト先には既にサーバーに上がっているサイトを指定することが前提になります(ローカルホストを指定するとAppleに弾かれるため)。

######④秘密鍵の取得
Apple Developer側で行う最後の作業です。
「Keys」の項をクリックし、新しく秘密鍵を生成します。

先ほどと同様に、「Sign In With Apple」を指定
スクリーンショット 2020-07-02 11.20.34.png

秘密鍵生成の対象とするApp Idを指定した後、登録をすると、秘密鍵のダウンロードページが表示されます。

スクリーンショット 2020-07-02 11.21.29.png

こちらのダウンロードページは一度のみの表示で、誤ってブラウザを閉じてしまった場合などは最初から秘密鍵を作り直すことになるので要注意です。
同ページにKeyIdなどの情報が表示されているので、ダウンロードと合わせて控えておきます。

######⑤Firebaseの設定

Firebase Authenticationの「Sign-in Methods」にて、下記写真のようにApple IDによる、ソーシャルログインを有効にします。

スクリーンショット 2020-07-02 11.27.04.png

その際に、

・サービスID(手順の③で作成した「Service Id」の識別子)
・AppleチームID
・キーID(手順の④の秘密鍵のDLページで控えたID)
・秘密鍵の中身

を入力します。

上記を余すことなく入力出来たら、
AppleとFirebaseの連携は完了です!!

####おわりに

私の所属するチームはFirebaseUIを利用して、ログインページを作っています。
Apple IDでログインする場合、他のソーシャルログイン(Google,Facebookなど)と若干Configのコードの書き方が異なるので注意です。(詳しくはGitHubを)

こちらの記事を参考にさせていただきました。
ありがとうございます!
Appleでサインインとは? 
Sign In with Apple on Firebase 
FirebaseUI

8
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?