7分で出来る!Facebook Developersでアプリの登録からログイン情報の登録までを徹底解説!

facebook

概要

どうも、@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ページにアクセス

Facebookにログイン | Facebook
Facebookにログインして、友達や家族と写真や近況をシェアしましょう。

「新しいアプリを追加」を選択

「表示名」と「連絡先メールアドレス」を入力して「アプリIDを作成してください」を選択

絶対翻訳おかしいやろw

アプリケーションが作成されます

Facebook DevelopersでのApp ID/App Secretの表示場所

Facebook連携する際に、良く使われるのが「App ID」と「App 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フォローお願いします

毎日技術ブログを更新しています。

「次回以降も記事を読んでみたい!」
「この辺分からなかったから質問したい!」

そんな時は、是非@daiki1003のフォローお願いします♪
Amazon.co.jp: ソーシャル・ネットワーク (字幕版)を観る | Prime Video
2003年。ハーバード大学に通う19歳の学生マーク・ザッカーバーグは、親友のエドゥアルド・サヴェリンとともにある計画を立てる。それは友達を増やすため、大学内の出来事を自由に語りあえるサイトを作ろうというもの。  閉ざされた“ハーバード”というエリート階級社会で、「自分をみくびった女子学生を振り向かせたい」―そんな若者ら...

コメント

タイトルとURLをコピーしました