Skygear updates: πŸ”‘ SSO Login with Google, FB, Linkedin and IG are now available in Skygear 1.4!


#1

Besides signing up your users typically with email and password, Skygear now supports Google, Facebook, LinkedIn and Instagram login! We are as excited as you about this new feature release. While you can refer to the documentations to learn about how the APIs work, below is a summary of what you can do with this new set of APIs.

  • Login with Google, Facebook, LinkedIn and Instagram
  • Connect a social account to the current user
  • Get the profile of the social accounts a user connected to

Requirements

Skygear Server version: 1.4.0+ (you can upgrade the server version at the Developer portal)
iOS, Android, JS SDK version:1.4.0+

Configure social login in the Skygear developer portal

Skygear provides a GUI for you to configure social logins. Go to Developer portal > User auth > Social Login. You should see the following setting page:

You need to enable the connection of the platform you want your users to log in with. For example, if I want to use Google login in my app, I should turn on the Google connection.

Then in Settings, follow the guide to set up the connection. You can also select the data you want to get from Google on this page.

Login with Google, Facebook, LinkedIn and Instagram

The iOS, the Android and the JS SDKs provide you with various way to authenticate your user through Google, Facebook, LinkedIn and Instagram.

iOS and Android SDK

You can either login a user with web flow or access token.

Login with web flow: Users will be redirected to an in-app web browser (iOS) / external browser (Android) for the authentication process. No external 3rd party SDKs are needed.

Login with access token: You would want to use login with access token when you are using the SDK from the 3rd party platform (i.e. Facebook SDK) to authenticate your users. You can use the access token you get from the 3rd party to create/login a user in Skygear.

Below is the login with web flow sample codes in Objective-C.

NSDictionary *options = @{
    @"scheme": @"${YOUR_APP_SCHEME}",
    @"scope": @[@"email"]
};

SKYContainer *container = [SKYContainer defaultContainer];
[container.auth loginOAuthProvider:@"google"
                           options:options
                 completionHandler:^(SKYRecord *user, NSError *error) {
                    /* ... */
                 }];

Learn more about the functions in iOS | Android.

JS SDK

You can either login a user with a pop up window, a redirected page or access token.

Pop-up window: As the name suggested, users will complete all the authentication flow in a pop up.

Redirected page: Users will be redirected to a new page to complete the authentication flow. As the user session on your webpage will be lost after the user is redirected to the authentication page, to get the authentication result, you need to call getLoginRedirectResult().

Access token: You would want to use login with access token when you are using SDK from the 3rd party platform (i.e. Facebook SDK) to authenticate your users. You can use the access token you get from the 3rd party to create/login a user in Skygear.

Below is the social login with pop up sample codes in JavaScript.

skygear.auth.loginOAuthProviderWithPopup('google').then(function(user) {
  console.info('Access token:', skygear.auth.accessToken);
}, function(error) {
  console.error('Login fail', error);
});

Learn more about the functions in JS.

Connect a social account to the current user

Suppose your user is already authenticated with the Skygear auth API (i.e. currentUser ! == null), you can connect a social account to this user with the Linking APIs. It works almost the same as the above Login APIs.

Learn more about the functions in iOS | Android | JS.

Get the profile of the social accounts a user is connected to

Remember in the portal you have selected the data you want to get from Google/Facebook/LinkedIn/Instagram. The profile will be fetched and stored in the _sso_oauth table. To get the profiles from client SDKs, simply use the getOAuthProviderProfiles function. You will get a result similar to the following:

{
    google: {
      email: tenten@skygear.io
      family_name: "Ten"
      gender: "female"
      given_name: "Ten"
      id: "12345678899"
      link: "https://plus.google.com/key"
      locale: "zh-TW"
      name: "Ten Ten"
      picture: "picture_url"
      verified_email: true
    },
    facebook: {...},
    linkedin: {...},
    instagram: {...}
}

Also, if you want to know whether the current account is connected to any Google Account, you can all this getOAuthProviderProfiles function and check whether result[β€˜google’] exists or not.

Learn more about this function in iOS | Android | JS.

Let us know what you think!


#2

#3