概要
「Sign in with Appleやらなきゃいけないのは分かってるけどどうやれば良いか分からない…。」
この記事では、そんなあなたのためにFlutter
x Firebase
x Sign in with Apple
について詳しく解説しました!
あなたがやることは
クリックとコピペのみです!
めっちゃ簡単!
前提
今回の記事では、Firebase
プロジェクトは作成されている言う前提で書かれております。
もし、まだでしたら下記からお願いします!
2,3分で出来ると思います。
今回のソースコード
例によって、サンプルコードはGitHub
にあげてあります。firebase_sign_in_with_apple
ブランチに移動して
・bundleID
・plist
を設定すればすぐに動きます。
ここからの流れ
以下の5ステップとなります。
どれもクリック or コピペで出来ます!
1. Apple
側でSign in with Apple
の設定
2. Firebase
側でSign in with Apple
の設定
3. Flutter
側でSign in with Apple
の設定
4. Sign in with Apple
を表示してログインしてみる
5. Flutter
側でSign in with Apple
による情報をFirebase
に送信
Apple側でSign in with Appleの設定
[iOS Dev Center] Sign in with Appleに対応したAppIDを生成する
細かいAppID
の生成の方は割愛させていただきます。
ただし、一点だけ注意事項があります。
生成の過程で 「Capabilities
」 を設定する項目があるのですが、
この際にSign in with Appleのチェックを必ず入れてください。
[Xcode] Capabilitiesに Sign in with Apple の追加
[project_root]/iOS/Runner.xcworkspaceを開く
「Signing & Capabilities」 -> 「+ Capability」の選択
Sign in with Appleを追加し、一覧に表示されることを確認する
Bundle Identifierが正しく設定されていることを確認する
Bundle Identifier
が先ほど作ったSign in with Apple
に対応したものが設定されていることを確認してください。
設定されていなければここで設定してください。
Firebase側でSign in with Appleの設定
Firebaseコンソールにアクセス
Authenticationを選択
「ログイン方法」の選択
Appleの選択
「有効にする」、「保存」
これで、Firebase
側の設定は終わりです。
本当Firebase
、お前ってやつは…。簡単すぎるよ。
Flutter側でSign in with Appleの設定
sign_in_with_appleのインストール
こちらをインストールしてください。
インストールの仕方がわからない方はこちらの記事からどうぞ。
firebase_authのインストール
まだの人はfirebase_auth
もインストールしておいてください!
これで、準備完了です!
多分4分くらいですよね?笑
では早速コーディングにまいりましょう!
Sign in with Appleを表示してログインしてみる
表示部分
import 'package:sign_in_with_apple/sign_in_with_apple.dart';
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Authentication'),
),
body: Center(
child: SignInWithAppleButton(
onPressed: logIn,
),
),
);
}
めちゃくちゃ簡単ですね。
先ほど、インストールした sign_in_with_apple
パッケージにSignInWithAppleButton
と言うWidgetがあるのでそれを表示するだけです。
注意
Sign in with Apple
は厳密にボタンのデザインが決まっています。
なので、自分で作ることはできません。
認証部分
void logIn() async { final result = await SignInWithApple.getAppleIDCredential( scopes: [ AppleIDAuthorizationScopes.email, AppleIDAuthorizationScopes.fullName, ], ); final oauthProvider = OAuthProvider('apple.com'); final credential = oauthProvider.credential( idToken: result.identityToken, accessToken: result.authorizationCode, ); await FirebaseAuth.instance.signInWithCredential(credential); }
認証時は、 AppleSignIn.performRequests
を呼び出します。
こちらが Future<AuthorizationResult>
を返すので、await
してAuthorizationResult
を取得出来るまで待ちます。
取得出来たらstatus
で成功/失敗を判定します。
Flutter側でSign in with Appleによる情報をFirebaseに送信
さて、成功した場合はFirebaseAuth
に認証情報を渡してあげなければいけません。
それが AuthorizationStatus.authorized
の部分です。
final oauthProvider = OAuthProvider('apple.com'); final credential = oauthProvider.credential( idToken: result.identityToken, accessToken: result.authorizationCode, ); FirebaseAuth.instance.signInWithCredential(credential);
OAuthProvider
インスタンスを生成し、
そのインスタンスのcredential
メソッドを用いて認証情報を取得します。
取得されたCredential
をFirebaseAuth.instance
に渡して終了です。
さいごに
いかがでしたでしょうか?
結構難しい印象があったかもしれませんが、
パッケージを使ったらあっという間でしたね。
Twitterフォローお願いします
「次回以降も記事を読んでみたい!」「この辺分からなかったから質問したい!」
そんな時は、是非Twitter (@daiki1003)やInstagram (@ashdik_flutter)のフォローお願いします♪
Twitterコミュニティ参加お願いします
Twitterコミュニティ「Flutter lovers」を開設しました!参加お待ちしております😁
☕️ Buy me a coffee
また、記事がとても役に立ったと思う人はコーヒーを奢っていただけると非常に嬉しいです!
コメント