OAuth 2.0授权代码授予在React / TypeScript应用中的实现

3pvhb19x  于 2023-11-16  发布在  React
关注(0)|答案(1)|浏览(162)

我目前正在构建一个React/TypeScript应用程序,该应用程序使用Fitbit和Oura API来获取数据并将数据转换为每周 Jmeter 板。我是一名前端开发人员,没有任何后端经验。
由于这两个API都需要使用授权代码授予(服务器端)方法进行OAuth2身份验证,因此我需要能够向服务器发送令牌,并让该服务器自动从API请求访问令牌,然后将其发送回我的应用。
我目前正在使用谷歌Firebase来管理数据,但似乎没有找到如何在Firebase中做到这一点。
对于前端开发人员来说,你有什么建议可以作为最有效和最低级别(低技术)的集成来使其正常工作?
我不知道这是否重要,但我使用的是来自'@tasoskakour/react-use-oauth2'的useOAuth 2包(参见下面的当前隐式流示例)

import { useOAuth2 } from '@tasoskakour/react-use-oauth2'

type AuthorizeApi = {
    url: string
    id: string
    scope: string
}

function AuthorizeWearableButton({ url, id, scope }: AuthorizeApi) {
    const { data, loading, error, getAuth } = useOAuth2({
        authorizeUrl: url,
        clientId: id,
        redirectUri: `${document.location.origin}/callback`,
        responseType: 'token',
        scope,
        onSuccess: (payload) => console.log('Success', payload),
        onError: (error_) => console.log('Error', error_),
    })

    return (
        <button
            className="rounded-lg px-12 py-8 bg-green-600 text-white"
            type="button"
            onClick={() => getAuth()}
        >
            Authorize
        </button>
    )
}

export default AuthorizeWearableButton

字符串

3htmauhk

3htmauhk1#

我正面临着确切的问题,我试图找出如何使用firebase-auth模块来验证用户,我试图创建一个自定义的oauth处理程序,这样我就可以添加Fitbit作为一个auth提供商在谷歌firebase控制台,但仍然没有运气.为了更进一步,有数据的开始,我调整了Fitbit_api和获得访问令牌我已经创建了一个服务“G!云运行”你可以在这里看到它Fitbit OAuth Service.我还必须实现如何创建code_challenge和code_verifier.我知道这不是一个好的解决方案,它现在的方式窝藏了很多安全和操作风险,尽管如此,它是一个开始和作品.这里是我的代码的链接. Fitbit_api
我真的很感谢你更新你的进展...或任何人与更多的信息。

相关问题