本記事は、
【Swift】FirebaseUIを使ったTwitterログイン機能の実装方法①の続きになります。
①では、完成形やコードの全容について記載しております。
実装手順については、本記事をご覧ください。
実装方法
実装方法について一から説明していきます。
バージョンの違いにより多少画面が異なる可能性がありますのでご了承ください。
また、Firebaseとアプリの連携は別記事でまとめていますのでそちらをご覧ください。
-> Firebaseとアプリの連携手順
本記事は、そちらの記事を終了している前提で記載しています。
Firebaseのプロジェクト作成
Firebaseコンソールを開きます。
構築 > Authentication
を選択し、始める
をクリックします。
クリックすると次のような画面になります。
Twitterをクリックすると、次の画面が出てきますので、
有効にする
にチェックを入れてTwitterログインを有効にします。
(APIキーとAPIシークレットは後ほど入力します。)
Twitter Developersでアプリの作成
Twitter DeveloperにログインしOverview
をクリックし下にスクロールします。
すると+ Create App
ボタンがあると思うのでそちらをクリックします。
適当な名前を指定し作成します。
(名前が被っていると作成できません。)
FirebaseとTwitter Developersの連携
作成出来ると次の画面に移動すると思います。
コチラのAPI key
とAPI secret key
を先ほどのFirebaseにコピペします。
それぞれ該当する箇所にコピペしてください。
Twitter Developersの方に戻り、App settings
をクリックします。
Authentication setting
のEdit
をクリックします。
Enable 3-legged OAuth
を有効にします。
Callback URLs
とWebsite URL
を入力します。
Callback URLsには、先ほどのFirebaseのAPI keyやAPI secret keyを入力した箇所の下に
https://から始まるURLが記載されているのでそちらをコピペします。
Website URLには、自分のWebサイトのURLを入力します。
私は、はてなブログのURLを入力しましたが、そんなものない!という方は、
ペライチというサイトで適当に作成しそちらのURLを貼ってください。
入力後save
をクリックします。
3-legged OAuth is enabled
となっていればOKです!
アプリ内でログイン機能の実装
次にログイン機能の実装を行います。
ログイン機能を実装するために
FirebaseUI
とFirebase
をimportします。
import Firebase
import FirebaseUI
次に、authUIにデフォルトのUIをインスタンス化します。
それと、サポートするログイン方法を使用するように FirebaseUI を構成します。
また、画面読み込み時にcheckLoggedIn()
を呼び出すようにしています。
checkLoggedIn( )については後ほど説明します。
let authUI = FUIAuth.defaultAuthUI()
let providers: [FUIAuthProvider] = [
FUIOAuth.twitterAuthProvider()
]
override func viewDidLoad() {
super.viewDidLoad()
authUI!.delegate = self
authUI!.providers = providers
checkLoggedIn()
}
authUI!.delegate = self
でエラーが出るのでFIXします。
(FUIAuthDelegateプロトコルに準拠していないためエラーが出ます。)
下記のようにプロトコルが追加されるはずです。
class ViewController: UIViewController, FUIAuthDelegate { }
viewDidLoadで呼ばれるcheckLoggedIn( )ですが、
ユーザが追加されているかどうかをチェックします。
Auth.auth().addStateDidChangeListener{ }
で
ユーザが存在した場合はuser
に情報を格納します。
存在しない場合はnilが返されるので、
self.login()
が実行されます。
func checkLoggedIn() {
Auth.auth().addStateDidChangeListener{auth, user in
if user != nil{
print("success")
} else {
print("fail")
self.login()
}
}
}
login( )では画面遷移の処理を行います。
let authViewController = authUI!.authViewController()
で
定数authViewControllerにViewの情報を代入しています。
その後のpresent( )で画面遷移を行っています。
func login() {
let authViewController = authUI!.authViewController()
self.present(authViewController, animated: true, completion: nil)
}
さいごに
一応これでログインの機能は実装することが出来ます。
しかし、ログイン画面が英語で合ったり、フルスクリーンでなかったりと、
カスタムしないと少し使い勝手が悪いかなと思いました。
一応、Firebaseとアプリの連携と
実装方法①〜②を順番に行えばTwitterログインを実装出来るはずです!
バージョンの違いにより画面の状態やコードの違いなどが出てくるかもしれませんので、
その時は自分で調べて実装してみてください!
かなり長くなってしまいましたが最後までご覧いただきありがとうございました。
参考
・FirebaseUI で iOS アプリに簡単にログインを追加する
・Twitter loginを実装
・Firebaseとアプリの連携手順