概要
どうも、@daiki1003です！
本日は、Facebook Developersでのアプリの登録/セットアップ周りの解説をしたいと思います。
「Facebook Developers、前とUI違って全然分からない…」
「Facebook Developersって何それ？」
みたいな経験者にも素人にも、わかりやすく解説しているので
是非参考にしてみてください！
この記事で解説する事
1. Facebook Developersへのアプリの登録
2. Facebook DevelopersでのApp ID/Secretの表示場所
3. Facebook Developersプロダクトである「Facebookログイン」の追加方法
4. Facebookログインセットアップ [iOS]
5. Facebookログインセットアップ [Android]
を解説したいと思います。
FlutterでのFacebookログインは明日の記事で解説したいと
思っているのでお楽しみに！
それでは、早速参りましょう！
Facebook Developersへのアプリの登録
Facebook Developerページにアクセス
「新しいアプリを追加」を選択
「表示名」と「連絡先メールアドレス」を入力して「アプリIDを作成してください」を選択
絶対翻訳おかしいやろｗ
アプリケーションが作成されます
Facebook DevelopersでのApp ID/App Secretの表示場所
Facebook連携する際に、良く使われるのが「App ID」と「Apｐ Secret」です。
明日説明する予定のFlutter x Firebase連携の際にも必要になります。
AppID と AppSecret の表示場所
Facebook Developersプロダクトである「Facebookログイン」の追加方法
「製品を追加」から「Facebookログイン」の「設定」を選択
すると、左側の「プロダクト」の位置に「Facebookログイン」が表示されるかと思います。
Facebookログインセットアップ [iOS]
左部メニューの「Facebookログイン」 > 「クイックスタート」から「iOS」を選択
「開発環境を設定する」は必要ないのでスキップ
「バンドルIDを追加する」では、バンドルIDを設定して「Save」をして「次へ」を選択
「アプリのシングルサインオンを有効にする」では有効にして「Save」をして「次へ」を選択
「info.plistを構成する」では6つの手順全てを行い、「次へ」を選択
info.plist外観
「アプリデリゲートに接続する」はスキップ
「Facebookログインボタンを追加する」はスキップ
「現在のログインステータスを確認する」はスキップ
「アクセス許可をリクエストする」はスキップ
これでiOS側の設定は完了です。
(もし、現状のUIと齟齬がありましたら@daiki1003に教えてください！)
Facebookログインセットアップ [Android]
左部メニューの「Facebookログイン」 > 「クイックスタート」から「Android」を選択
「Android用Facebook SDKをダウンロードする」はスキップ
「Facebook SDKをインポートする」はスキップ
「Androidプロジェクトの情報を入力する」の設定
パッケージ名には「パッケージ名」を入力し、
アクティビティクラス名には「パッケージ名.MainActivity」を設定すればOK。
※この際に、未リリースのアプリだと「認証出来ません」と言う旨のダイアログが出て来ますが「このパッケージ名を使用する」を選択で大丈夫です。
「開発キーハッシュとリリースキーハッシュを追加する」の設定
コマンドを実行してそのアウトプットを入力して次へ進みます。
こちらはOS毎に分かれているので指示に従いましょう。
実行イメージ
「アプリのシングルサインオンを有効にする」を「有効にする」を選択
「リソースとマニフェストを編集する」の設定
[project_root/android/app/src/main/res/values/strings.xml]の設定
AndroidManifest.xmlの設定
permissionとmeta-dataを貼り付けます。
gradle.propertiesの設定
本来であればこの作業はいらないはずなのですが。
実行するとenableR8を設定しろと怒られたので言われるがまま設定します。
下記3行を最後にコピペします。
android.useAndroidX=true android.enableJetifier=true android.enableR8=true
「App Eventsを記録する」はスキップ
「Facebookログインボタンを追加する」はスキップ
「コールバックを登録する」はスキップ
「ログインステータスを確認する」はスキップ
これでAndroid側の設定は以上となります。
(もし、現状のUIと齟齬がありましたら@daiki1003に教えてください！)
さいごに
いかがでしたでしょうか？
とても簡単に出来ましたね！
明日はいよいよFutter x Firebaseでfacebookへのログイン処理を書きたいと思います。
お楽しみに♪
Twitterフォローお願いします
「次回以降も記事を読んでみたい！」「この辺分からなかったから質問したい！」
そんな時は、是非Twitter (@daiki1003)やInstagram (@ashdik_flutter)のフォローお願いします♪
Twitterコミュニティ参加お願いします
Twitterコミュニティ「Flutter lovers」を開設しました！参加お待ちしております😁
☕️ Buy me a coffee
また、記事がとても役に立ったと思う人はコーヒーを奢っていただけると非常に嬉しいです！
コメント