【Swift】FirebaseUIを使ったTwitterログイン機能の実装方法②


本記事は、
【Swift】FirebaseUIを使ったTwitterログイン機能の実装方法①の続きになります。
①では、完成形やコードの全容について記載しております。

実装手順については、本記事をご覧ください。

実装方法

実装方法について一から説明していきます。
バージョンの違いにより多少画面が異なる可能性がありますのでご了承ください。

また、Firebaseとアプリの連携は別記事でまとめていますのでそちらをご覧ください。
-> Firebaseとアプリの連携手順

本記事は、そちらの記事を終了している前提で記載しています。

Firebaseのプロジェクト作成

Firebaseコンソールを開きます。
構築 > Authenticationを選択し、始めるをクリックします。

クリックすると次のような画面になります。

Twitterをクリックすると、次の画面が出てきますので、
有効にするにチェックを入れてTwitterログインを有効にします。
(APIキーとAPIシークレットは後ほど入力します。)

Twitter Developersでアプリの作成

Twitter DeveloperにログインしOverviewをクリックし下にスクロールします。
すると+ Create Appボタンがあると思うのでそちらをクリックします。

適当な名前を指定し作成します。
(名前が被っていると作成できません。)

FirebaseとTwitter Developersの連携

作成出来ると次の画面に移動すると思います。
コチラのAPI keyAPI secret keyを先ほどのFirebaseにコピペします。

それぞれ該当する箇所にコピペしてください。

Twitter Developersの方に戻り、App settingsをクリックします。

Authentication settingEditをクリックします。

Enable 3-legged OAuthを有効にします。

Callback URLsWebsite URLを入力します。

Callback URLsには、先ほどのFirebaseのAPI keyやAPI secret keyを入力した箇所の下に
https://から始まるURLが記載されているのでそちらをコピペします。

Website URLには、自分のWebサイトのURLを入力します。
私は、はてなブログのURLを入力しましたが、そんなものない!という方は、
ペライチというサイトで適当に作成しそちらのURLを貼ってください。

入力後saveをクリックします。
3-legged OAuth is enabledとなっていればOKです!

アプリ内でログイン機能の実装

次にログイン機能の実装を行います。

ログイン機能を実装するために
FirebaseUIFirebaseをimportします。

ViewController.swift

import Firebase
import FirebaseUI

次に、authUIにデフォルトのUIをインスタンス化します。
それと、サポートするログイン方法を使用するように FirebaseUI を構成します。

また、画面読み込み時にcheckLoggedIn()を呼び出すようにしています。
checkLoggedIn( )については後ほど説明します。

ViewController.swift

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プロトコルに準拠していないためエラーが出ます。)

下記のようにプロトコルが追加されるはずです。

ViewController.swift

class ViewController: UIViewController, FUIAuthDelegate { }

viewDidLoadで呼ばれるcheckLoggedIn( )ですが、
ユーザが追加されているかどうかをチェックします。

Auth.auth().addStateDidChangeListener{ }
ユーザが存在した場合はuserに情報を格納します。

存在しない場合はnilが返されるので、
self.login()が実行されます。

ViewController.swift
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( )で画面遷移を行っています。

ViewController.swift

func login() {
    let authViewController = authUI!.authViewController()
    self.present(authViewController, animated: true, completion: nil)
}

さいごに

一応これでログインの機能は実装することが出来ます。

しかし、ログイン画面が英語で合ったり、フルスクリーンでなかったりと、
カスタムしないと少し使い勝手が悪いかなと思いました。

一応、Firebaseとアプリの連携と
実装方法①〜②を順番に行えばTwitterログインを実装出来るはずです!

バージョンの違いにより画面の状態やコードの違いなどが出てくるかもしれませんので、
その時は自分で調べて実装してみてください!

かなり長くなってしまいましたが最後までご覧いただきありがとうございました。

参考

FirebaseUI で iOS アプリに簡単にログインを追加する
Twitter loginを実装
Firebaseとアプリの連携手順