[Swift] How to implement the Twitter login function using Firebase UI ②

This article is This is a continuation of [Swift] How to implement the Twitter login function using Firebase UI ①. In (1), the complete form and the entire code are described.

See this article for implementation instructions.

Implementation method

I will explain the implementation method from the beginning. Please note that the screen may differ slightly depending on the version.

Also, please refer to the separate article for the cooperation between Firebase and the app. -> Firebase and App Linkage Procedure

This article is based on the assumption that the article has been completed.

Firebase project creation

Open the Firebase console. Select Build> Authentication and click Start. Click to display the following screen. When you click on Twitter, the following screen will appear, so Check Enable to enable Twitter login. (You will enter the API key and API secret later.)

Creating apps with Twitter Developers

Log in to Twitter Developer and click Overview to scroll down. Then I think there is a + Create App button, so click on it. Specify an appropriate name and create it. (If the name is covered, it cannot be created.)

Cooperation between Firebase and Twitter Developers

If you can create it, you will move to the next screen. Copy and paste the API key and API secret key here into Firebase. Please copy and paste each applicable part. Go back to Twitter Developers and click App settings. Click Edit under Authentication setting. Enable Enable 3-legged OAuth. Enter the Callback URLs and the Website URL.

In Callback URLs, under the place where you entered the API key and API secret key of Firebase earlier The URL starting with https: // is listed, so copy and paste it.

For Website URL, enter the URL of your website. I entered the URL of the Hatena blog, but there is no such thing! For those who say Please create it on the site called Peraichi and paste the URL there. After entering, click save. It's OK if it says 3-legged OAuth is enabled!

Implementation of login function within the app

Next, implement the login function.

To implement the login function Import Firebase UI and Firebase.

ViewController.swift

import Firebase
import FirebaseUI

Then instantiate the default UI into the authUI. Also, configure FirebaseUI to use the supported login methods.

Also, checkLoggedIn () is called when the screen is loaded. checkLoggedIn () will be explained later.

ViewController.swift

let authUI = FUIAuth.defaultAuthUI()
let providers: [FUIAuthProvider] = [
    FUIOAuth.twitterAuthProvider()
]

override func viewDidLoad() {
    super.viewDidLoad()
        
    authUI!.delegate = self
    authUI!.providers = providers
        
    checkLoggedIn()    
}

I get an error with authUI! .Delegate = self, so fix it. (An error will occur because it does not comply with the FUIAuthDelegate protocol.)

The protocol should be added as shown below.

ViewController.swift

class ViewController: UIViewController, FUIAuthDelegate { }

CheckLoggedIn () called by viewDidLoad, Check if the user has been added.

With Auth.auth (). addStateDidChangeListener {} If a user exists, the information is stored in user.

If it doesn't exist, nil is returned, so self.login () is executed.

ViewController.swift

func checkLoggedIn() {

    Auth.auth().addStateDidChangeListener{auth, user in
        if user != nil{
            print("success")
        } else {
            print("fail")
            self.login()
        }
    }
}

login () processes the screen transition.

With let authViewController = authUI! .AuthViewController () View information is assigned to the constant authViewController.

The screen transition is performed by present () after that.

ViewController.swift

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

at the end

For the time being, the login function can be implemented.

However, the login screen matches in English, or it is not full screen, I thought it would be a little inconvenient if I didn't customize it.

For the time being, with the cooperation of Firebase and the application Implementation method You should be able to implement Twitter login by following steps ① and ② in order!

Since the screen status and code may differ depending on the version, In that case, please investigate and implement it yourself!

It's been a long time, but thank you for watching until the end.

reference

· Easy Add Login to iOS App with Firebase UI -Implement Twitter login ・ Procedure for linking Firebase and apps