Sign-in with Facebook (Optional)

[中文版本]

The end users might want to use their Facebook accounts to login to RainMaker Mobile apps.
This section describes the steps required to configure the Facebook sign-in for the end users.

Pre-Requisites

  1. Facebook Developer Account is already created. (Reference: https://developers.facebook.com)
  2. ESP-RainMaker-Core is deployed.
  3. Custom domain is created. (Reference: Configuring customer Domain)

Steps to Configure Facebook Sign In

Steps to create Facebook Login App

  1. Sign in to the Facebook Developer Account
  2. From the My Apps menu, choose Create App.
    Create Facebook App
  3. Select an App Type.
  4. Enter a name for your Facebook app, and then choose Create App.
    Select App Name
  5. On the left navigation bar, choose Settings, and then Basic.
    Settings Basic
  6. Note the App ID and the App Secret. You will use them in the next section.
    App Client ID
  7. Choose + Add Platform from the bottom of the page.
    Add Platform
  8. Choose Website.
    Select Website
  9. Under Website, enter the path to the sign-in page for your app into Site URL. It should look like the following.
    https://<your_user_pool_domain>/login?response_type=code&client_id=<your_client_id>&redirect_uri=https://www.example.com Add Site URL
  10. Choose Save changes.
  11. Enter the path to the root of your user pool domain into App Domains.
    https://<your_user_pool_domain> App App Domain
  12. From the navigation bar choose Add Product and choose Set up for the Facebook Login product.
    Add Product
  13. From the navigation bar choose Facebook Login and then Settings.
    FB Login Settings
  14. Enter the path to the /oauth2/idpresponse endpoint for your user pool domain into Valid OAuth Redirect URIs.
    https://<your_user_pool_domain>/oauth2/idpresponse Add OAuth Redirect
  15. Choose Save changes.

Steps to configure Facebook Identity Provider via RainMaker Dashboard

  1. Log in to RainMaker Dashboard with your admin account. Go to Deployment Settings.
    Deployment Settings
  2. Go to the Identity Providers tab.
    Identity Providers
  3. Click on '+' icon to add Identity providers configuration.
  4. Choose "Facebook" from "Identity Provider" dropdown.
  5. Add client ID and client secret noted in the previous section. Configuring Client

Configuring callback URL(Redirect URIs)

Callback URL indicates where the user is to be redirected after a successful sign-in using third party authenticating services. After the user successfully signs-up using one of these third party authenticating services, the user will be redirected to one of these URLs.

If users are to be redirected to your phone app, you should form the callback URL for your app. To form the callback URLs(redirect URIs) for phone apps, please check below sections:

Configure the callback URLs in RainMaker dashboard with steps given here: Configuring callback URL

Verifying Sign-in With Facebook

This section describes the steps to verify if the Sign-in with Facebook is configured correctly.

  1. Login to AWS Console, Go to Cognito Service and click on the "rainmaker-user-email-mobile-pool".
    Select UserPool
  2. Click on App Client Settings from the left hand side menu.
    Cognito AppClient
  3. Look for the App client "rainmaker-user-email-mobile-pool-client".
  4. Enable Facebook in Identity Providers.
    Enable Facebook
  5. Scroll down and click on** Launch Hosted UI**.
    Launch Hosted UI
  6. In the launched hosted UI, you will be shown multiple options as shown below:
    Cognito Hosted UI
  7. Click on Continue with Facebook.
  8. Complete Facebook Sign-In Facebook SignIn
  9. After you click the Next button, you will be redirected to the callback URL configured in the Cognito App client settings and you will see an authorization code in the browser URL. Hosted UI Redirect
    Note - In this example, we have configured Espressif’s home page, so the redirection happened to this page.