javascript 如何在使用Google Identity Services for Web创建SSO时使用我的自定义按钮?

3htmauhk  于 2023-03-21  发布在  Java
关注(0)|答案(1)|浏览(97)

我试图在我的react/Nextjs Web应用程序中创建Google SSO弹出流。
然而,通过遵循Google的Google Identity Services for Web指南,我所能使用的就是Google提供的最低限度品牌按钮:

问:我想知道如何使用自己的自定义按钮来触发相同的弹出窗口选择帐户?
我欢迎任何其他的选择,如果不反对。

dvtswwa3

dvtswwa31#

您可以使用Google OAuth2.0 URL作为自定义按钮。
首先,获取Web应用程序的client_id-https://console.cloud.google.com
单击按钮时替换窗口URL。
有很多方法可以做到这一点,你可以使用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"

上面是oauth2的url,你需要提供client_id,redirect_url和你需要的范围。
作用域是一个权限,如果你需要用户的电子邮件信息,你需要添加https://www.googleapis.com/auth/userinfo.email这个作用域,等等。
你可以在这里找到所有的范围:https://developers.google.com/identity/protocols/oauth2/scopes
示例:Google OAuth2 API v2

相关问题