英文:
Azure B2C login: how to get access token in React SPA and without using the Azure login pop or login page?
问题
我有一个React单页应用程序，拥有一个自定义登录页面。目前我们使用AWS，并使用AWS Cognito获取访问令牌。
基本上，当用户首次访问网站并在其浏览器中加载前端代码时，它会迅速判断是否存在访问令牌。因此只渲染自定义登录页面。
然后用户输入他的密码和用户名，然后从AWS Cognito返回一个访问令牌和一个ID令牌。以下是代码：
import { Auth } from 'aws-amplify';
...
// 登录
const user = await Auth.signIn(formData.username, formData.password);
现在由于令牌存在于浏览器中，前端代码将呈现用户仪表板。
我们现在正在尝试迁移到Azure。在Azure B2C MSAL文档中，介绍了使用JavaScript SDK进行登录的方法：
登录
MSAL.js公开了3个登录API：loginPopup()、loginRedirect()和ssoSilent()
然而，它们都有由Azure编写的弹出窗口或重定向网页。我不想使用Azure编写的前端代码，也不想自定义这些给定的登录页面。
我想继续使用我原来编写的自定义登录页面，我只需要一个Azure API，我可以在那里提供用户名和密码，然后获取访问令牌和ID令牌，就像在使用AWS Cognito / AWS-Amplify时那样。
我该如何做到这一点？
英文:
I have a React SPA and I have a custom login page. Currently we are on a AWS and we use AWS Cognito to get access token.
Basically when the user first visit the website and when the front end code is loaded in his browser, it quickly judges that there is no access token. Therefore only the custom login page is rendered.
Then the user inputs his password and username, and then an access token and an ID token are returned from AWS Cognito. Here is the code:
import { Auth } from 'aws-amplify';
...
// login
const user = await Auth.signIn(formData.username, formData.password);
Now since the tokens are present in the browser, the frontend code will render the user dashboard.
We are now trying to migrate to Azure. In the Azure B2C MSAL documentation, it introduces ways to login with the JavaScript SDK:
Sign-in
MSAL.js exposes 3 login APIs: loginPopup(), loginRedirect() and ssoSilent()
However, they have Azure-written pop-up window or redirect webpage. I do not want to use the Azure-written front end code, nor do I want to custom these given login pages.
I want to keep using my original custom written login page, and I just need an Azure API where I can provide the username and password and get the access and ID token, like in the use of AWS Cognito / AWS-Amplify.
How can I do that?
答案1
得分: 1
你可以使用ROPC流程，只需输入用户名和密码，而无需涉及任何用户交互来登录用户。
我注册了一个Azure AD B2C应用程序，并启用了**"允许公共客户端流程"**，如下所示：
现在，通过将Application的**Manifest设置oauth2AllowImplicitFlow属性为true**来进行修改，如下所示：
我在我的B2C租户中创建了一个ROPC用户流程，如下所示：
我使用以下参数在Postman中成功获取了访问令牌，使用ROPC流程：
POST https://<b2ctenant_name>.b2clogin.com/b2ctenant.onmicrosoft.com/B2C_1_ROPC_Auth/oauth2/v2.0/token
用户名：admin@srimtb2c.onmicrosoft.com
密码：xxxxxxx
授权类型：密码
范围：openid e386646b-a4f8-42fb-aa0a-0xxxxxxxx offline_access
客户端ID：e386646b-a4f8-42fb-aa0a-0xxxxxxxxxxx
响应：
您可以使用上述刷新令牌来更新令牌，如下所示：
POST https://<b2ctenant_name>.b2clogin.com/b2ctenant.onmicrosoft.com/B2C_1_ROPC_Auth/oauth2/v2.0/token
授权类型：刷新令牌
客户端ID：e386646b-a4f8-42fb-aa0a-0xxxxxxxxx
资源：e386646b-a4f8-42fb-aa0a-0xxxxxxxxx
刷新令牌：<refresh_token_from_above_step>
响应：
当我在jwt.ms中解码上述ID令牌时，我得到了以下声明：
注意，您只能使用ROPC流程与本地帐户一起使用。如果您正在与外部身份提供者进行身份验证，这将无法正常工作。由于此流程涉及披露用户的密码，因此在生产中实施它不安全。
参考：
设置资源所有者密码凭据流程 - Azure AD B2C | Microsoft
英文:
> You can make use of ROPC flow to sign in users just by entering username and password without involving any user interaction.
>
I registered one Azure AD B2C application and enabled "Allow public-client flows" like this:
Now, modify Application's Manifest by setting oauth2AllowImplicitFlow attribute to true like below:
I created one ROPC user flow in my B2C tenant like below:
I got the access token successfully via Postman using ROPC flow with below parameters:
POST https://<b2ctenant_name>.b2clogin.com/b2ctenant.onmicrosoft.com/B2C_1_ROPC_Auth/oauth2/v2.0/token
username: admin@srimtb2c.onmicrosoft.com
password:xxxxxxx
grant_type:password
scope:openid e386646b-a4f8-42fb-aa0a-0xxxxxxxx offline_access
client_id:e386646b-a4f8-42fb-aa0a-0xxxxxxxxxxx
Response:
You can use above refresh token to renew tokens like below:
POST https://<b2ctenant_name>.b2clogin.com/b2ctenant.onmicrosoft.com/B2C_1_ROPC_Auth/oauth2/v2.0/token
grant_type:refresh_token
client_id:e386646b-a4f8-42fb-aa0a-0xxxxxxxxx
resource:e386646b-a4f8-42fb-aa0a-0xxxxxxxxx
refresh_token: <refresh_token_from_above_step>
Response:
When I decoded above ID token in jwt.ms, I got below claims:
Note that, you can use ROPC flow only with local accounts. This won't work if you are authenticating with external identity providers. As this flow involves disclosing user's password, it is not secure to implement it in production.
Reference:
Set up a resource owner password credentials flow - Azure AD B2C | Microsoft
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论