Google Auth Provider - get photo and name/surname

KevichVinc · March 16, 2022, 5:24pm

System Information

macOS Monterey 12.3:
strapi 4.0.7:
sqllite:
node 14.17.6:
yarn 1.22.11:

Hi everyone!

Is there a way to get more info (like name/surname and user photo) using standart stapi google provider, or i have to write custom provider?

If its all about “custom-way”, could anyone please provide me with some guide how to make it. Or maybe someone had similar experience?

Thanks in advance!

Gwenole_Midy · March 17, 2022, 8:58am

Hey take a look here : [Auth Providers] how to add scope for google - Questions and Answers / Strapi Backend - Strapi Community Forum

KevichVinc · March 17, 2022, 10:43am

Thanks!

So i’ve created Providers.js and added bootstrap in index.js as in tread you linked.
But its not overriding providers from node_modules

Maybe i have to do something differently because im using v4 of strapi

Gwenole_Midy · March 17, 2022, 11:23am

Hi,

It’s possible so go to the source code to see where the file is located. Maybe it’s different

Also, only accounts création will use the New code, so maybe remove existing accounts and try again.

KevichVinc · March 17, 2022, 1:29pm

Hi!

I tried official guide + everything from the tread you linked (including your last answer about creating new user, cleaning user collection)

Added bootstrap.js and Providers.js as it mentioned:

extensions/users-permissions/services/Providers.js
extensions/users-permissions/config/functions/bootstrap.js

also added bootstrap function in src/index.js


  async bootstrap({ strapi }) {
    const pluginStore = strapi.store({
      environment: '',
      type: 'plugin',
      name: 'users-permissions',
    });
    // Ensure profile scope for Google Auth
    const grantConfig = await pluginStore.get({ key: 'grant' })
    if(grantConfig){
      if(grantConfig.google && grantConfig.google.scope){
        grantConfig.google.scope = ['openid', 'email', 'profile']
        await pluginStore.set({ key: 'grant', value: grantConfig });
      }
    }
  },

Still no result

Gwenole_Midy · March 17, 2022, 1:52pm

May you try this :

case 'google': {
      const instance = axios.create({
        baseURL: 'https://www.googleapis.com/oauth2/v3',
        headers: {'Authorization': 'Bearer ' + access_token }
      });

      instance.get('userinfo').then(x =>  {
        callback(null, {
          providerId: x.data.sub,
          username: x.data.given_name,
          email: x.data.email
        });
      }, err => callback(err));
      break;
    }

In Provider.js

kwiat1990 · May 6, 2022, 10:09pm

Any update on this one?

kwiat1990 · May 9, 2022, 8:26am

It think one problem is that the override files are not called and the other one is that even providing additional options to scopes like profile doesn’t really influence what data are returned. I have extended scoped to return openid and profile additionally and then console.log what will returned and I get only some token info. I have tried to change line 117 on @KevichVinc screenshot to userinfo but then I get 404, so I think it’s an invalid option.

By default response body equals to:

body: {
    issued_to: 'foobar.apps.googleusercontent.com',
    audience: 'foobar.apps.googleusercontent.com',
    user_id: '1234567890',
    scope: 'openid https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile',
    expires_in: 3598,
    email: 'foo@gmail.com',
    verified_email: true
  }

EDIT: thanks to this reply Changes for Google auth provider · Issue #2660 · strapi/strapi · GitHub, one need to change google URL in order to get profile info in the response as follows:

 google
        .get("https://www.googleapis.com/oauth2/v3/userinfo")
        .auth(access_token)
        .request(({body}) => ({
              username: body.email.split("@")[0],
              email: body.email,
              name: body.name,
              // put here your additional keys
        }))

Berrier_Joffrey · July 2, 2023, 8:48am

Version : 4.11.3

There is a functional code to add picture, first name etc in the Google sign-in with the Strapi provider

Put this code in the src/index.js

"use strict";

module.exports = {
  register(/*{ strapi }*/) {},
  async bootstrap({ strapi }) {
    await strapi
      .service("plugin::users-permissions.providers-registry")
      .register(`google`, ({ purest }) => async ({ query }) => {
        const google = purest({ provider: "google" });

        const res = await google
          .get("https://www.googleapis.com/oauth2/v3/userinfo")
          .auth(query.access_token)
          .request();

        const { body } = res;

        return {
          email: body.email,
          firstname: body.given_name,
          lastname: body.family_name,
          picture: body.picture,
          provider: "google",
          username: body.name,
        };
      });
  },
};

Meghdad_Hadidi · August 16, 2023, 9:51pm

Wow! You saved me a lot of time @Berrier_Joffrey
Great help
Thanks

Billi_Jean · October 31, 2023, 11:33pm

Great post. I would like to share these online services related to photographs: