使用Quasar+Amplify Auth开发，PWA与Android(Cordova)端鉴权如何适配？

你遇到的ERR_CONNECTION_TIMED_OUT报错核心原因是：PWA模式下走Web端OAuth流程，用Web类型客户端ID和HTTP/HTTPS回调地址；安卓打包后是原生应用，需要适配Android专属OAuth客户端ID、自定义Scheme回调逻辑，原PWA的回调地址在原生环境下无法被响应导致超时，你的猜测方向正确。

• 登录Google Cloud控制台，新增「Android」类型的OAuth 2.0客户端ID，填写你APK的包名（与Quasar打包配置里的安卓包名完全一致），同时上传你APK签名证书的SHA-1指纹，调试版和正式版的签名SHA-1都要单独添加，避免其中一个环境无法使用。
• 进入AWS Cognito用户池后台，在「联邦身份提供商- Google」配置中，把新增的Android客户端ID加入授权客户端ID列表，保证Cognito认可该客户端ID的认证请求。
• 在Cognito应用客户端的回调地址配置中，新增安卓端专属回调地址，格式为你的安卓包名://，比如包名为com.demo.myapp，回调地址就填com.demo.myapp://，同时把该地址添加到Cognito的跨域白名单中，登出回调也可以配置为同一个地址。

如果你用Capacitor打包安卓（Quasar官方推荐方案），修改根目录下的capacitor.config.json，添加自定义Scheme配置：

{
  "server": {
    "androidScheme": "你的安卓包名"
  }
}

如果你用Cordova打包安卓，安装cordova-plugin-customurlscheme插件，配置你的安卓包名作为自定义Scheme即可。

Quasar内置process.env.MODE全局变量，可以直接判断当前运行环境，无需自定义判断逻辑。

1. 动态配置Amplify Auth参数 #

import { Amplify, Auth } from 'aws-amplify'

const amplifyConfig = {
  Auth: {
    // 通用配置，所有环境通用
    region: "你的AWS区域",
    userPoolId: "你的Cognito用户池ID",
    // 不同环境用对应的客户端ID
    userPoolWebClientId: process.env.MODE === 'pwa' 
      ? "你之前申请的Web类型客户端ID" 
      : "新增的Android类型客户端ID",
    oauth: {
      domain: "你的Cognito OAuth域名",
      scope: ["openid", "email", "profile"],
      // 不同环境用对应的回调地址
      redirectSignIn: process.env.MODE === 'pwa'
        ? "PWA的登录回调地址"
        : "你的安卓包名://",
      redirectSignOut: process.env.MODE === 'pwa'
        ? "PWA的登出回调地址"
        : "你的安卓包名://",
      responseType: "code"
    }
  }
}
Amplify.configure(amplifyConfig)

2. 登录逻辑适配 #

安卓端不能直接用PWA的浏览器重定向逻辑，需要调用原生浏览器标签页打开认证地址，示例用Capacitor官方的@capacitor/browser插件，Cordova可以用cordova-plugin-inappbrowser实现相同逻辑：

async function handleLogin() {
  if (process.env.MODE === 'pwa') {
    // PWA模式直接调用默认联邦登录方法
    await Auth.federatedSignIn({ provider: 'Google' })
  } else {
    // Android模式获取认证地址后用原生浏览器打开
    const authUrl = await Auth.federatedSignIn({ provider: 'Google' })
    await Browser.open({ url: authUrl.url })
  }
}

3. 安卓端回调监听 #

用户完成Google认证后会通过自定义Scheme跳回应用，需要监听跳转事件完成登录流程，示例用Capacitor官方的@capacitor/app插件：

import { App } from '@capacitor/app'

// 应用初始化时注册回调监听
App.addListener('appUrlOpen', async (event) => {
  // 判断是OAuth登录回调
  if (event.url.startsWith('你的安卓包名://')) {
    // 交给Amplify处理授权码完成登录
    await Auth.handleAuthResponse(event.url)
    // 登录完成跳转到目标页面
    this.$router.push('/需要登录的目标页路径')
  }
})

注意：打包测试前请确认签名证书的SHA-1值已经正确填写到Google Cloud的Android客户端ID配置中，调试版用Android Studio默认debug.keystore的SHA-1，正式版用你签名APK的正式证书SHA-1，否则会出现认证失败问题。

内容的提问来源于stack exchange，提问作者Geemee Theway