Question 54184 in Javascript Question posted in
A very good W3school tutorial can be found here.

How to use my custom button when creating SSO with the Google Identity Services for Web? – Javascript

I’m trying to create google sso popup flow in my react/Nextjs web app.

However, by following the guidelines by Google with the Google Identity Services for Web, all I can I use is a bare minimum branded button provided by Google:

enter image description here

QUESTION: I wonder how can I use my own custom button to trigger the same popup for selecting account?

I’m welcome to any other options if not deprecated.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found a solution for myself:

    use initTokenClient and requestAccessToken to retrieve access token with the prompt.

    https://developers.google.com/identity/oauth2/web/guides/use-token-model#how_to_handle_consent

    And then retrieve email (usually in server) by requesting google api 'https://www.googleapis.com/oauth2/v1/userinfo' with the bearer access token .


  2. 0

    You can use Google OAuth2.0 url for your custom button.

    First, get a client_id for your web application- https://console.cloud.google.com

    Replace window url on button click.

    There are many ways to do that, you can use window.location.replace(‘your_google_auth_url’)

    https://accounts.google.com/o/oauth2/v2/auth?scope=https%3A//www.googleapis.com/auth/businesscommunications https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile https%3A//www.googleapis.com/auth/business.manage&access_type=offline&prompt=consent&include_granted_scopes=true&response_type=code&state=state_parameter_passthrough_value&redirect_uri="your-app-redirect-url"&client_id="your_google_app_client_id"

    Above is the oauth2 url. You need to provide client_id, redirect_url and scope you need.

    Scope is a permission, if you need users email info you need to add https://www.googleapis.com/auth/userinfo.email this scope, etc.

    You can find all the scopes here: https://developers.google.com/identity/protocols/oauth2/scopes

    Example: Google OAuth2 API v2

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search