uniapp 如何实现google登录-安卓端

怜悯
4 阅读2分钟

uniapp 如何实现google登录-安卓端

本文只讲解uniapp安卓端如何获取到idToken，ios使用uniapp官方方法可以获取

海外app貌似最常用的就是邮箱登录，在app上表现出来最常用的就是谷歌一键登录，或者邮箱加网页验证；google登录流程大致如下

  • 点击google登录->选择账号->获取到idToken等信息->给到后端->校验并创建自己的token

1、官方给的uni.login登录获取不到idToken、serverAuthCode

主要是安卓获取不到，ios可以获取到，不过ios我没有测试

const info = ref()
uni.login({
  provider: 'google' as any,
  success(loginRes) {
    console.log('登录成功', loginRes)
    info.value.loginRes = loginRes
    uni.getUserInfo({
      provider: 'google' as any,
      success(info1) {
        info.value.userInfo = info1
        console.log('获取用户信息成功', info1)
      },
      fail(err) {
        console.log('获取用户信息失败', err)
        info.value.err2 = err
      },
    })
  },
  fail(err) {
    console.log('登录授权失败', err)
    info.value.err = err
  },
})

最终可以拿到信息只有以下内容（这个是自身的基座运行拿到的数据）

{
    "loginRes": {
        "authResult": {
            "openid": "xxx",
            "unionid": "xxx"
        },
        "errMsg": "login:ok"
    },
    "userInfo": {
        "userInfo": {
            "headimgurl": "https://lh3.googleusercontent.com/a/ACg8ocJErWXFYxbMX6kU6VxErv2PSreD-Lj-Pu8wfOACqXqLBUA9UGo",
            "nickname": "m ds",
            "unionid": "xxx",
            "openid": "xxx",
            "email": "2222122121@gmail.com",
            "openId": "xxx",
            "nickName": "m ds",
            "avatarUrl": "https://lh3.googleusercontent.com/a/ACg8ocJErWXFYxbMX6kU6VxErv2PSreD-Lj-Pu8wfOACqXqLBUA9UGo"
        },
        "errMsg": "getUserInfo:ok"
    }
}

里面并没有需要的idToken，无法提供给后端完整鉴权校验

2、我的实现方式

我查到的谷歌登录获取到idToken的方式有两种

  • 使用Google Sign-In SDK
  • Credential Manager （我选择的实现方式，不过还是使用别人的插件）

插件地址：ext.dcloud.net.cn/plugin?id=2…

这个插件是在官方插件上改版的，官方插件有一些问题，这个做了部分修改，并增加了部分功能

不过我在使用过程中还是存在一些问题

  • 1、插件获取到登录数据了，但是解析失败，这个主要是没有对谷歌返回的数据进行分类处理

修改插件代码修复解析失败问题：

// 将以下handleSignIn方法替换原有的handleSignIn方法即可
// 原有的代码仅处理了GoogleIdTokenCredential一种情况，没有处理CustomCredential

fun handleSignIn(result: GetCredentialResponse): GoogleLoginSuccess? {
		val credential = result.credential
		if (credential is com.google.android.libraries.identity.googleid.GoogleIdTokenCredential) {
			val idToken = credential.idToken
			// 验证 Token 并获取用户信息
			return getUserFromToken(idToken)
		} else if (credential is androidx.credentials.CustomCredential) {
            if (credential.type == com.google.android.libraries.identity.googleid.GoogleIdTokenCredential.TYPE_GOOGLE_ID_TOKEN_CREDENTIAL) {
                try {
                    val googleIdTokenCredential = com.google.android.libraries.identity.googleid.GoogleIdTokenCredential.createFrom(credential.data)
                    return getUserFromToken(googleIdTokenCredential.idToken)
                } catch (e: Exception) {
                    // console.log("Failed to parse GoogleIdTokenCredential", e)
                    return null
                }
            }
        }
		// 处理其他类型的凭证（如密码）
		return null
	}

插件使用方式

// #ifdef APP
import { googleLogin, googleLogout } from '@/uni_modules/coc-oauth-google'
// #endif

function googleLogin_() {
  googleLogin({
    serverClientId: 'xxxxx.apps.googleusercontent.com', // 必填web端id
    success: (res: any) => {
      console.log('success------111--------', res)

      copy(JSON.stringify(res))
    },
    fail: (res: any) => {
      console.log('fail-------222-------', res)
    },
    complete: (res: any) => {
      console.log('complete====333=======', res)
    },
  })
}

拿到的数据如下，包含需要使用的idToken

{
    "email": "xxxxx@gmail.com",
    "nickname": "xxxx",
    "idToken": "xxxxxxx.xxxxxxxx.xxxxxxxx",
    "headimgurl": "https://lh3.googleusercontent.com/a/ACg8ocJErWXFYxbMX6kU6VxErv2PSreD-Lj-Pu8wfOACqXqLBUA9UGo=s96-c",
    "openId": "xxxxxxxxxxxxxxxxxxx"
}

3、google登录注意点

  • ClientId必须使用web端ClientId，不能使用android端ClientId，原因不明，只知道必须这样子
  • 打包发布到google的应用市场需要修改android凭证的sha-1值

4、其他参考的帖子和实现方法

avatar
文章
阅读
粉丝