In this article, we are going to cover the social Sign in with google account when using the Captive portal.
The process is similar to the setup with Facebook signin covered in a different article. Facebook Login for the Web / Facebook App Registration
Step 1: Go to the google cloud console to create and generate the Google APP token and App secret that will be used with the ray captive portal to query for users google accounts details by following the steps below.
a) Go to https://console.cloud.google.com
b) Sign in with your google account.
c) From the google console cloud, create a new project. as shown below.
e) Give the project a name, in this example, I named it CAPTIVE PORTAL RAY.
as seen in screen shot below.
f) In the new project dashboard, Select the credentials tab on the sidebar and then click on create credentials tab at the top menu bar. as shown in the image below.
g) The Credentials type menu required for the Captive Portal are OAuth Client ID.
This credentials are what the captive portal app user to request the User's Consent so the ray can access the user's date such as email id.
h) Next step is required to configure the consent screen and select the target users for your account.
i) The next step can be selected based on your Use case, But in this article we want to make the app available to any user with a google account. so we select external type.
j) After we want to fill the Our App details and email id where our users sigining into the captive portal can reach us from. and our app logo to display.
k) After filling in the app details. we also need to provide the details of the authorized URI and domain that is https://captivecloud.ray.life/portals as shown below.
Provide the developers email id then save and continue.
l) The scopes is the permissions you request your users to authorize your App to access and data from their
google accounts
Then save and Continue
M) the next step is to add test users for the app before you publish and verify it.
after adding test user accounts, save and continue. A full summary of the provided details will come up as below.
The above details from Step 1 a) to m) were details for the 0auth Consent screen that usually pops up on User's Google account from an External App in this scenario (Ray Captive portal) requesting for users permissions to use their google account to sign in to the Wi-Fi network.
Step 2. The next step is to generate the APP token and secret from the credentials tab as shown below.
This time the credentials will open up a window since we have already configured a consent screen in Step 1
Step 3. We shall select the application type as a web application, Give the application a name i.e. Ray.life and importantly we need to specify the authorized redirect URI as: https://captivecloud.ray.life/portals as shown below. then click on create, and we shall get the app token and app key that shall be used in the ray controller.
Step 4.. On saving the details filled in step 3 above.. the credentials shall be generated and provided as given below.
