Javascript 如何将azure b2c与react集成
我正在使用react,我必须通过Javascript 如何将azure b2c与react集成,javascript,reactjs,azure,react-hooks,azure-ad-b2c,Javascript,Reactjs,Azure,React Hooks,Azure Ad B2c,我正在使用react,我必须通过Azure B2C让我的用户登录,因此我正在尝试这样做,但我无法找到如何做到这一点以及问题所在 我尝试过的 我从微软网站上得到了这个例子,它是使用纯JavaScript(香草)完成的,我不知道如何在我的代码中实现它 所以我试着用一些react库移动,我搜索了一下,发现 我遵循了他们编写的相同代码,但当我点击登录按钮时,它会将我带到azure的登录页面,因此在我的app.js中,我正在执行console.log(authentication.getAccessTok
Azure B2C
让我的用户登录,因此我正在尝试这样做,但我无法找到如何做到这一点以及问题所在
我尝试过的
app.js
中,我正在执行console.log(authentication.getAccessToken())代码>登录后抛出空值,我不知道为什么
我的代码
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,这很好,但登录后它也只是抛出错误
所以我没能解决这个问题,这就是为什么我转到另一个库,它几乎和这个相似
所以在这里,当我点击登录按钮,我得到的错误如下
我从微软获得的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();
});
我尝试从实例中删除https,并像这样点击它
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();
});
//mytenant.b2clogin.com/tenant id/oauth2/authrep
它抛出错误为未捕获的AuthorityUriUnsecure
我认为它将位于错误的位置您的b2c实例坐标不正确(请参见注释)。您可以找到更多详细信息:
如果您愿意,您可以使用它,它显示了如何使用oidc client.js
库从React应用程序使用B2C策略。默认情况下,它配置为使用PKCE,但如果需要,您可以将其配置为使用隐式流(不推荐)
git回购协议中提供了完整的说明,但这里是高级概述
- 您需要首先在b2c中创建应用程序以及策略(未显示)。您应该添加两个重定向URI--
https://localhost:3000
和https://localhost:3000/callback.html
- 除了
id\u令牌
之外,如果您希望接收access\u令牌
,您还可以添加权限
- 您的清单应类似于:
- 克隆repo并更新AuthSettings.ts中的设置,以匹配您的租户。您必须更新
client\u id
和contoso
,这是租户名称
- 使用
warn
或npm
- 默认情况下,应用程序将在
http://localhost:3000
- 单击登录,您将进入b2c策略以完成旅程
- 完成b2c策略中的旅程后,您将被重定向回应用程序
我的答案已被主持人删除,因此在评论时,您不需要创建任何按钮,因此当用户点击您的网站URL时,它将被重定向到Microsoft b2c页面,他们的用户将输入他们的详细信息。成功登录后,它将重定向回您的应用程序,当您在门户中注册应用程序时,将发生此重定向配置。但我认为您可以通过添加门户来解决此CORS问题。请检查此链接尝试此链接,git hub repo for this@Manish是的,我已经尝试过此操作,不起作用,上面的库不是很好,因为它在很久以前是活动的,如果不需要tfp,没有人会提供帮助?Manish,我已经在我的答案中添加了一个工作配置文件,以便您将条目与之进行比较。目前,我无法从您的条目中判断您使用的是哪种OIDC流,但如果您可以分享,这将非常有用。我使用的是配置文件中反映的OIDC隐式流。我可以共享,但是上面的stsSettings
您正在定义我是否也需要定义它,如果是的话,我使用的是这个libraryManish——我实际上有一个使用OIDC-client.js和react和b2c的工作示例。如果您不介意使用该库,我可以将其作为我答案的一部分进行共享,这样您基本上可以使用它。我已经添加了详细信息以及指向工作示例的链接。
{
"id": "443ca8db-7bd1-4ebd-9671-ce94e006a18a",
"acceptMappedClaims": null,
"accessTokenAcceptedVersion": 2,
"addIns": [],
"allowPublicClient": null,
"appId": "50d2c416-a5ad-4c5c-b36a-0d1ac5b48167",
"appRoles": [],
"oauth2AllowUrlPathMatching": false,
"createdDateTime": "2020-09-02T00:11:35Z",
"groupMembershipClaims": null,
"identifierUris": [],
"informationalUrls": {
"termsOfService": null,
"support": null,
"privacy": null,
"marketing": null
},
"keyCredentials": [],
"knownClientApplications": [],
"logoUrl": null,
"logoutUrl": null,
"name": "OIDC-Test-APP",
"oauth2AllowIdTokenImplicitFlow": false,
"oauth2AllowImplicitFlow": false,
"oauth2Permissions": [],
"oauth2RequirePostResponse": false,
"optionalClaims": null,
"orgRestrictions": [],
"parentalControlSettings": {
"countriesBlockedForMinors": [],
"legalAgeGroupRule": "Allow"
},
"passwordCredentials": [],
"preAuthorizedApplications": [],
"publisherDomain": "contoso.onmicrosoft.com",
"replyUrlsWithType": [
{
"url": "http://localhost:3000/signin-callback.html",
"type": "Spa"
},
{
"url": "http://localhost:3000/",
"type": "Spa"
}
],
"requiredResourceAccess": [
{
"resourceAppId": "00000003-0000-0000-c000-000000000000",
"resourceAccess": [
{
"id": "37f7f235-527c-4136-accd-4a02d197296e",
"type": "Scope"
},
{
"id": "7427e0e9-2fba-42fe-b0c0-848c9e6a8182",
"type": "Scope"
}
]
},
{
"resourceAppId": "18ac2afe-2c1f-4ea8-8d63-14dd50ee4f85",
"resourceAccess": [
{
"id": "d5515006-5646-4398-ad59-fffc357f3423",
"type": "Scope"
}
]
}
],
"samlMetadataUrl": null,
"signInUrl": null,
"signInAudience": "AzureADandPersonalMicrosoftAccount",
"tags": [],
"tokenEncryptionKeyId": null
}
const settings = {
// This is the metadata endpoint
authority: 'https://contoso.b2clogin.com/contoso.onmicrosoft.com/v2.0/.well-known/openid-configuration?p=B2C_1A_signup_signin',
// Turn off calls to user info since CORS will block it
loadUserInfo: false,
// The URL where the Web UI receives the login result
redirect_uri: 'http://localhost:3000/signin-callback.html',
// The no longer recommended implicit flow must be used if CORS is disabled
// If you want to use impicit flow use id_token instead of code for the return type.
response_type: 'code',
// Other OAuth settings
client_id: '18ac2afe-2c1f-4ea8-8d63-14dd50ee4f85',
// openid is required, remove https://contoso.onmicrosoft.com/test/Read if access_token is not required.
scope: 'openid https://contoso.onmicrosoft.com/test/Read',
// Supply these details explicitly. Directly copied from azure ad b2c policy metadata endpoint.
metadata: {
issuer: 'https://contoso.b2clogin.com/9859cd0c-9d99-4683-abcc-87462f67a0bc/v2.0/',
authorization_endpoint: 'https://contoso.b2clogin.com/contoso.onmicrosoft.com/oauth2/v2.0/authorize?p=b2c_1a_signup_signin',
token_endpoint: 'https://contoso.b2clogin.com/contoso.onmicrosoft.com/oauth2/v2.0/token?p=b2c_1a_signup_signin',
jwks_uri : 'https://contoso.b2clogin.com/contoso.onmicrosoft.com/discovery/v2.0/keys?p=b2c_1a_signup_signin',
end_session_endpoint: "https://contoso.b2clogin.com/contoso.onmicrosoft.com/oauth2/v2.0/logout?p=b2c_1a_signup_signin&post_logout_redirect_uri=http%3A%2F%2Flocalhost:3000%2F"
},
} as UserManagerSettings;