【发布时间】：2020-12-13 19:35:51
【问题描述】：
我正在使用 react，我必须通过 Azure B2C 让我的用户登录，所以我正在尝试这样做，但我不知道如何做到这一点以及是什么。
我的尝试
- 我从 Microsoft 网站获得了这个使用纯 JavaScript（香草）完成的示例，我不知道如何在我的反应代码中实现它。
所以我尝试使用一些 react 库，我四处搜索并找到 This library
我遵循了他们编写的相同代码，但是当我点击登录按钮时，它需要我进入天蓝色的登录页面，所以在我的app.js 我正在做console.log(authentication.getAccessToken()); 登录后它会抛出 null，我没有知道为什么
我的代码
authentication.initialize({
// optional, will default to this
instance: 'https://login.microsoftonline.com/tfp',
// My B2C tenant
tenant: 'mytenant.onmicrosoft.com',
// the policy to use to sign in, can also be a sign up or sign in policy
signInPolicy: 'B2c_signupsignin',
// the the B2C application you want to authenticate with (that's just a random GUID - get yours from the portal)
clientId: 'fdfsds5-5222-ss522-a659-ada22',
// where MSAL will store state - localStorage or sessionStorage
cacheLocation: 'sessionStorage',
// the scopes you want included in the access token
scopes: ['https://mytenant.onmicrosoft.com/api/test.read'],
// optional, the redirect URI - if not specified MSAL will pick up the location from window.href
redirectUri: 'http://localhost:3000',
});
然后点击登录我正在这样做
const Log_in = () => {
authentication.run(() => {});
};
在我的 app.js 中，我正在做如下操作
import authentication from 'react-azure-b2c';
function App() {
console.log(authentication.getAccessToken());
}
所以最初它显示 null 很好，但登录后它也只是抛出错误。
所以我无法解决这个问题，这就是为什么我转移到与此几乎相似的另一个库
所以当我点击登录按钮时，我收到错误
我从 Microsoft 获得的带有 valina Javascript 的示例，我认为这是完美的方法，但我如何通过我不知道的反应来限制它
我在这里呆了很长时间，我现在不知道该怎么办，无法在谷歌上找到用 react 实现它的好例子
PS：我正在使用 react hooks 功能组件编写代码，请指导我完成此操作
我只是想以适当的方式使用 react 来实现这个，我知道很多人已经在使用这个，所以我只想看看一个很好的例子。
编辑/更新
我试过这样做
b2cauth.initialize({
instance: 'https://mylogin.b2clogin.com/tfp',
tenant: 'mylogin.b2clogin.com',
signInPolicy: 'B2C_1_SigninSignupUsername',
clientId: 'fc3081ec-504a-4be3-a659-951a9408e248',
cacheLocation: 'sessionStorage',
scopes: ['https://mylogin.b2clogin.com/api/demo.read'],
redirectUri: 'http://localhost:3000',
});
b2cauth.run(() => {
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
});
我检查粘贴为答案的 Microsoft 链接，并更改了实例：
instance: 'https://mylogin.b2clogin.com/tfp',
到
instance:'https://my-tanent-name.b2clogin.com/tenent-id/oauth2/authresp',
但我收到错误请求
然后我检查网络选项卡并检查它正在点击的 url，它正在点击下方
https://login.microsoftonline.com/common/discovery/instance?api-version=1.0&authorization_endpoint=https://my-tenatnt-name.b2clogin.com/tenant-id/oauth2/authrespmy-tenant-name.b2clogin.com/b2c_1_signinsignupusername/oauth2/v2.0/authorize
我尝试从实例中删除 https 并像这样点击它
//mytenant.b2clogin.com/tenant-id/oauth2/authresp
它抛出错误为Uncaught AuthorityUriInsecure
我认为这是错误的地方
【问题讨论】：
-
我的回答被版主删除了，所以评论，你不需要创建任何按钮，所以当用户点击你的网站URL时，它将被重定向到微软b2c页面，以及他们的用户将输入他们的详细信息。成功登录后，它会被重定向回您的应用，当您在门户中注册您的应用时会发生此重定向配置。
-
但我认为您可以通过在门户中添加 localhost:3001 来解决这个 CORS 问题。
-
试试这个，medium.com/@fiqriismail/…，这个github.com/fiqriismail/tutorialcode的git hub repo
-
@Manish 是的，我已经尝试过了，但不起作用，上面的库不好，因为它是活跃的，如果出现问题，没有人可以提供帮助
标签： javascript reactjs azure react-hooks azure-ad-b2c