oauth2.0 如何从React原生应用使用受Amplify保护的Next.JS Rest端点

q9rjltbz  于 2023-02-03  发布在  React
关注(0)|答案(1)|浏览(148)
    • 背景:**

我当前的堆栈是一个Next服务器,用作Expo-React Native运行的移动应用程序的管理门户和REST API。Next服务器当前托管为Lambda@Edge。
我已经用AWS Amplify的withAuthenticator Package 器保护了Next服务器和React Native应用程序(我也尝试了特定的认证包,如Next-Auth和Expo的认证包)

    • 问题:**

但是,我不知道如何从Mobile应用程序-〉Next Server将Auth信息(Access_token)添加到REST请求中
我试着将令牌作为承载头添加到API中,但没有成功,之后我相当肯定这一切都必须通过cookie设置和发送。但我被如何正确地实现这些cookie卡住了。我希望端点:[] config可以用来设置我自己的域,以发布和处理cookie。读取服务器上的请求显示,当使用此方法发布时,它不包含任何身份验证信息。
同样,使用RTK查询(最好将所有授权添加到此,而不是Amplify的API设置),我没有正确的信息来进行授权API请求
以下是两个应用程序的工作页面身份验证的一些片段

    • API端点/api/版本:**
import type { NextApiRequest, NextApiResponse } from 'next'
import { withSSRContext } from 'aws-amplify'

export default async function handler(
    req: NextApiRequest,
    res: NextApiResponse<Data | Error>,
) {
    const { Auth } = withSSRContext({req})

    try {
        const user = await Auth.currentAuthenticatedUser()
        return res.status(200).json({
            version: '1.0.0',
            user: user.username,
        })
    } catch (err) {
        console.log(err)
        return res.status(200).json({
            message: 'Unauthenticated',
        })
    }
}
    • 移动应用程序配置:**
import {
    useAuthenticator,
    withAuthenticator,
} from '@aws-amplify/ui-react-native'
import { Amplify, Auth } from 'aws-amplify'
import awsconfig from './aws-exports'

Amplify.configure({
    ...awsconfig,
    API: {
        endpoints: [
            {
                name: 'MyApi',
                endpoint: 'http://NextIP:NextPort/api/',
            },
        ],
    },
})

Auth.configure(awsconfig)

export default withAuthenticator(App)
    • 移动屏幕:**
import { API } from 'aws-amplify'

function getData() {
    const apiName = 'MyApi'
    const path = '/version'
    const myInit = {
        headers: {}, // OPTIONAL
    }

    return API.get(apiName, path, myInit)
}

export default function ModalScreen() {
    // Get token / Cookie for auth

    // const { data, isLoading, error } = useGetApiVersionQuery(null) // RTK Query
    getData() // Amplify
        .then(response => {
            console.log(response)
        })
        .catch(error => {
            console.log(error.response)
        })
    return ( <></>)}
xurqigkl

xurqigkl1#

我找到了一个解决方案,但是,当令牌在头中使用Bearer令牌发送时,无法触发Next-Auth中间件,这是我处理路由的理想方式。
我对getToken({req})调用进行了 Package ,以便在没有JWT Web令牌的情况下,它会尝试单独对令牌进行编码。最后,ChatGpt不知何故将我带到了aws-jwt-verify包,其中包含验证aws-amplify/auth生成的令牌所需的一切,在我的例子中,是从react-native生成的令牌。
组件/实用程序/验证实用程序.ts

import { NextApiRequest } from 'next'
import { CognitoJwtVerifier } from 'aws-jwt-verify'
import { getToken } from 'next-auth/jwt'

// Verifier that expects valid token:
const verifier = CognitoJwtVerifier.create({
    userPoolId: process.env.COGNITO_USERPOOL_ID ?? '',
    tokenUse: 'id',
    clientId: process.env.COGNITO_CLIENT_ID ?? '',
    issuer: process.env.COGNITO_ISSUER ?? '',
})

export async function getMobileToken(req: NextApiRequest) {
    let token = null
    try {
        token = await getToken({ req })
    } catch (error) {
        console.log('Could not get JWT Web Token')
    }
    try {
        if (!token)
            token = await getToken({
                req,
                async decode({ token }) {
                    if (!token) return null
                    const decoded = await verifier.verify(token)
                    return decoded
                },
            })
    } catch (error) {
        return null
    }
    console.log('Mobile Token:', token)
    return token
}

相关问题