如何在react js中实现宽松的Oauth-2.0?

kt06eoxx  于 2022-11-21  发布在  React
关注(0)|答案(1)|浏览(180)

我需要在我的项目中实现松散授权发送消息的渠道,直接消息和添加提醒。所以,任何人都可以建议我如何实现松散授权的React项目或有任何npm包,我可以利用来实现松散授权像谷歌授权。

7ajki6be

7ajki6be1#

我有这个问题。花了我很长时间来解决,但无论如何,这里是我的解决方案:

useEffect(() => {
    

    const getdata = async (con) =>{
        try{
        await axios.get("https://slack.com/api/users.identity",con).then((res) => console.log(res)).catch((err) => console.log(err))
        }catch{

        }
        
        
    }



    const gettoken =  async () => {
        try{
          await axios.get("https://slack.com/api/oauth.v2.access",{params: {client_id: sclientId, client_secret: sclientsecret, code: name1[1]}}).then((res) => setData(res.data.authed_user.access_token)).catch((err) => console.log(err));
        }catch{

        }   
        
    }

    gettoken();

    const config = {
        headers: {
            "Access-Control-Allow-Headers": "authorization",
            "Access-Control-Allow-Origin": "*",
            "Authorization": `Bearer ${ data}`,
            "token": data
            
            
        },
    };

    getdata(config);

})

因此,sclientidsclientsecretname1(存储代码)是我在代码中定义的变量。我有一个链接(或按钮)将用户重定向到slack以获得授权。代码如下:

<a href ={`https://slack.com/oauth/v2/authorize?user_scope=identity.basic,identity.email,identity.avatar&client_id=${sclientId}`} ><img src="https://api.slack.com/img/sign_in_with_slack.png" /></a>

在用户给予许可之后,他被用代码引导回我的站点。我使用window.location.search从URL中得到代码,并将其存储在name1[1]中,然后使用该gettoken函数发送client_id,client_secret和code来松弛get请求。这带回包括令牌的JSON。然后我使用getdata函数将此令牌作为请求中的报头发送回slack,client_secret并设置重定向URL,您必须转到apps.slack.com并创建一个应用程序。如果这还不够清楚,请询问我任何问题

相关问题