admin管理员组文章数量:1317131
I am working with react and I have to give my user login through Azure B2C
, So I am trying to do that but I am not able to find out how to do that and what is the.
What I have tried
- I got this example from Microsoft site which is done using plain JavaScript (vanilla), I have no idea how I will implement this in my react code.
So I tried to move with some react library, I google around and found This library
I have followed the same code they have written, but when I hit login button it takes me to login page of azure, So in my app.js
I am doing console.log(authentication.getAccessToken());
after login it throws null, I don't know why
My code
authentication.initialize({
// optional, will default to this
instance: '',
// My B2C tenant
tenant: 'mytenant.onmicrosoft',
// 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: ['.read'],
// optional, the redirect URI - if not specified MSAL will pick up the location from window.href
redirectUri: 'http://localhost:3000',
});
And then on click of login I am doing this
const Log_in = () => {
authentication.run(() => {});
};
in my app.js I am doing like below
import authentication from 'react-azure-b2c';
function App() {
console.log(authentication.getAccessToken());
}
So initially it is showing null which is fine, but after login also it is throwing error only.
So I was not able to resolve this, that's why I move to the other library which is almost similar to this
- This one
So here when I click on login button I am getting error as
The example I got from Microsoft with valina Javascript, I think that is the perfect way to do but How can I imliment that through react I don't know
This the code with vanilla js
I have been stuch here from long time i don't know what to do now, not able to find good example on google to implement it with react
PS: I am using react hooks functional ponent to write my code, please guide me through this
I just want to implement this using react in a proper way, I know out tehre so many peoples who are already using this, so I just want to see a good example.
Edit / update
I tried doing like this
b2cauth.initialize({
instance: '',
tenant: 'mylogin.b2clogin',
signInPolicy: 'B2C_1_SigninSignupUsername',
clientId: 'fc3081ec-504a-4be3-a659-951a9408e248',
cacheLocation: 'sessionStorage',
scopes: ['.read'],
redirectUri: 'http://localhost:3000',
});
b2cauth.run(() => {
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
});
I check Microsoft link pasted as answer, and changed instance:
instance: '',
to
instance:'',
but I am getting error as bad request
and I check network tab and I check the url it is hitting and it is hitting below
.0&authorization_endpoint=.b2clogin/b2c_1_signinsignupusername/oauth2/v2.0/authorize
I tried removing https from instance and hit it like this
//mytenant.b2clogin/tenant-id/oauth2/authresp
it throws error as Uncaught AuthorityUriInsecure
I think it is going to wrong place
I am working with react and I have to give my user login through Azure B2C
, So I am trying to do that but I am not able to find out how to do that and what is the.
What I have tried
- I got this example from Microsoft site which is done using plain JavaScript (vanilla), I have no idea how I will implement this in my react code.
So I tried to move with some react library, I google around and found This library
I have followed the same code they have written, but when I hit login button it takes me to login page of azure, So in my app.js
I am doing console.log(authentication.getAccessToken());
after login it throws null, I don't know why
My code
authentication.initialize({
// optional, will default to this
instance: 'https://login.microsoftonline./tfp',
// My B2C tenant
tenant: 'mytenant.onmicrosoft.',
// 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./api/test.read'],
// optional, the redirect URI - if not specified MSAL will pick up the location from window.href
redirectUri: 'http://localhost:3000',
});
And then on click of login I am doing this
const Log_in = () => {
authentication.run(() => {});
};
in my app.js I am doing like below
import authentication from 'react-azure-b2c';
function App() {
console.log(authentication.getAccessToken());
}
So initially it is showing null which is fine, but after login also it is throwing error only.
So I was not able to resolve this, that's why I move to the other library which is almost similar to this
- This one
So here when I click on login button I am getting error as
The example I got from Microsoft with valina Javascript, I think that is the perfect way to do but How can I imliment that through react I don't know
This the code with vanilla js
I have been stuch here from long time i don't know what to do now, not able to find good example on google to implement it with react
PS: I am using react hooks functional ponent to write my code, please guide me through this
I just want to implement this using react in a proper way, I know out tehre so many peoples who are already using this, so I just want to see a good example.
Edit / update
I tried doing like this
b2cauth.initialize({
instance: 'https://mylogin.b2clogin./tfp',
tenant: 'mylogin.b2clogin.',
signInPolicy: 'B2C_1_SigninSignupUsername',
clientId: 'fc3081ec-504a-4be3-a659-951a9408e248',
cacheLocation: 'sessionStorage',
scopes: ['https://mylogin.b2clogin./api/demo.read'],
redirectUri: 'http://localhost:3000',
});
b2cauth.run(() => {
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
});
I check Microsoft link pasted as answer, and changed instance:
instance: 'https://mylogin.b2clogin./tfp',
to
instance:'https://my-tanent-name.b2clogin./tenent-id/oauth2/authresp',
but I am getting error as bad request
and I check network tab and I check the url it is hitting and it is hitting below
https://login.microsoftonline./mon/discovery/instance?api-version=1.0&authorization_endpoint=https://my-tenatnt-name.b2clogin./tenant-id/oauth2/authrespmy-tenant-name.b2clogin./b2c_1_signinsignupusername/oauth2/v2.0/authorize
I tried removing https from instance and hit it like this
//mytenant.b2clogin./tenant-id/oauth2/authresp
it throws error as Uncaught AuthorityUriInsecure
I think it is going to wrong place
Share Improve this question edited Sep 1, 2020 at 6:01 manish thakur asked Aug 25, 2020 at 6:39 manish thakurmanish thakur 82010 gold badges43 silver badges82 bronze badges 7- My answer was deleted by the moderator, so menting, you don't need to create any button, so when the user hit your website URL, it will be redirected to Microsoft b2c page, and their users will enter their details. and after successful sign in it will be redirected back to your app, this redirection configuration will happen when you register your app in portal. – Manish Commented Aug 26, 2020 at 3:15
- but this CORS issue I think you can resolve by adding localhost:3001 in portal. – Manish Commented Aug 26, 2020 at 3:18
- check this link learn.microsoft./en-us/samples/azure-samples/… – Manish Commented Aug 26, 2020 at 3:54
- try this, medium./@fiqriismail/…, git hub repo for this github./fiqriismail/tutorialcode – Manish Commented Aug 26, 2020 at 4:03
- @Manish yes I have already tried this, not working, the above library is not good as it was active way back, no body is there to help if issue – manish thakur Commented Aug 26, 2020 at 4:20
1 Answer
Reset to default 6 +150Your coordinates for the b2c instance are not correct (see note). You can find more details: https://learn.microsoft./en-us/azure/active-directory-b2c/b2clogin
If you like you can use this sample, which shows how to use B2C policy from React application using oidc-client.js
library. By default it is configured to use PKCE but you can configure it to use implicit flow instead if needed (not remended).
Complete instructions provided in the git repo but here is the high level overview.
- You need to first create application in b2c along with the policy (not shown). You should add two redirect uris --
https://localhost:3000
andhttps://localhost:3000/callback.html
- You can also add permissions in case you like to receive an
access_token
in addition to theid_token
.
- Your manifest should look similar to:
{
"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.",
"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
}
- Clone the repo and update the settings present inside
AuthSettings.ts
to match your tenant. You must updateclient_id
andcontoso
which is the tenant name.
const settings = {
// This is the metadata endpoint
authority: 'https://contoso.b2clogin./contoso.onmicrosoft./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 remended 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./test/Read if access_token is not required.
scope: 'openid https://contoso.onmicrosoft./test/Read',
// Supply these details explicitly. Directly copied from azure ad b2c policy metadata endpoint.
metadata: {
issuer: 'https://contoso.b2clogin./9859cd0c-9d99-4683-abcc-87462f67a0bc/v2.0/',
authorization_endpoint: 'https://contoso.b2clogin./contoso.onmicrosoft./oauth2/v2.0/authorize?p=b2c_1a_signup_signin',
token_endpoint: 'https://contoso.b2clogin./contoso.onmicrosoft./oauth2/v2.0/token?p=b2c_1a_signup_signin',
jwks_uri : 'https://contoso.b2clogin./contoso.onmicrosoft./discovery/v2.0/keys?p=b2c_1a_signup_signin',
end_session_endpoint: "https://contoso.b2clogin./contoso.onmicrosoft./oauth2/v2.0/logout?p=b2c_1a_signup_signin&post_logout_redirect_uri=http%3A%2F%2Flocalhost:3000%2F"
},
} as UserManagerSettings;
Build and run the app using
yarn
ornpm
Application will launch by default on
http://localhost:3000
- Click Login and it should take you to the b2c policy to plete the journey.
- After you plete the journey in the b2c policy you will be redirected back to the application.
本文标签: javascriptHow to integrate azure b2c with reactStack Overflow
版权声明:本文标题:javascript - How to integrate azure b2c with react - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742022030a2414852.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论