实现谷歌OAuth2.0授权登录

💡 需求：平台部署国际版，需要给用户提供Google快捷登录方式

需求分析

💡 Tips：整理登录流程，同时研究谷歌登录授权的功能文档，准备vpn和谷歌账号

OAuth 2.0文档：developers.google.com/identity/pr…

想调用谷歌APIs，必须经过谷歌OAuth2.0来验证和授权，流程如下：

谷歌配置

💡 Tips：要获取跳转到google授权页的URL，需要在谷歌开发者做配置，获取 Google OAuth 客户端ID，再拼接重定向 URI以及一些参数

谷歌开发者网站地址：console.cloud.google.com/

进入API和服务——凭据页面，先创建项目

项目创建好后，配置同意屏幕，就是谷歌授权页面显示需要的一些信息。选择外部，然后填写信息，保存并继续就好。当前还是测试版本，可以配置一些测试账号 创建客户端，选择web应用，信息填写好，点击保存就会生成客户端ID

代码以及实现效果

// 点击Google登录  执行这个方法进行跳转
const toGoogle = () => {
    // window.scope = 'email profile'; // 请求的权限范围，可以根据需求修改
    window.clientId = ''; // Google OAuth 客户端 ID
    window.redirectUri = 'http://localhost:9089/login'; // 重定向 URI,
    window.responseType = 'code'; // 授权响应类型，表示要求返回授权码
    window.authUrl = `https://accounts.google.com/o/oauth2/v2/auth?client_id=${window.clientId}&redirect_uri=${window.redirectUri}&scope=https%3A//www.googleapis.com/auth/userinfo.email%20https://www.googleapis.com/auth/userinfo.profile%20openid&access_type=offline&include_granted_scopes=true&response_type=${window.responseType}&prompt=consent`;
    window.location.href = window.authUrl;
  };
  
// url截取code
  const location = useLocation();
  // 基于正则query化url参数
export function queryURLParams(url: string) {
  const obj: any = {};
  url.replace(/([^#&?=]+)=([^#&?=]+)/g, (_, $1, $2) => (obj[$1] = $2));
  url.replace(/#([^#&?=]+)/g, (_, $1) => (obj.HASH = $1));
  return obj;
}
  useEffect(() => {
    if (location.search) {
      if (location.search.includes('error')) {
        message.error('Google authorization failure');
      } else {
        const { code } = queryURLParams(location.search);
        qryGoogleUserInfo(code);
      }
    }
  }, [qryGoogleUserInfo, location, location.search]);

实现效果：点击按钮跳转到授权页面，授权完成后，重定向回登录页，截取url里面的code，查询并显示谷歌用户信息。点击next登录到首页

遇到的问题

1.本地调试 配置完后开发环境一直无法调试，只能部署到线上调试，很费力，后来发现配置来源是少配置了http://localhost

2.code无效报错。拿到code后，后端一直报错，无法获取google的用户信息。报错说是不符合谷歌验证规则，查了很久发现巨坑。原来是项目之前的隐私政策是语谋雀的外链接，而配置同意屏幕的应用网域时，必须是已获授权的网域，所以不符合验证规则

3.不知道算不算坑，因为要访问谷歌需要代理，代理模式选择“自动配置代理”会导致访问不到国际版的页面，而是直接访问国内的网站