简体   繁体   English

“未配置身份验证客户端 ID”,我正在使用 azure 为我的应用程序制作 Microsoft 登录页面的反应 SPA。我的错误是什么?

[英]"Authentication Client ID is not configured", I am making a react SPA of a microsoft login page for my application using azure. What is my mistake?

This is what I have done:这就是我所做的:

I added a .env file on the root Level:我在根级别添加了一个.env文件:

REACT_APP_AZURE_ACTIVE_DIRECTORY_APP_CLIENT_ID = (Client ID)

Then I added three files under src subfolder.然后我在src子文件夹下添加了三个文件。

Then I changed the code of app.tsx to a new one as I was asked.然后我按照要求将app.tsx的代码更改为新代码。

This is the tutorial I am following . 这是我正在关注的教程

https://learn.microsoft.com/en-us/azure/developer/javascript/tutorial/single-page-application-azure-login-button-sdk-msal https://learn.microsoft.com/en-us/azure/developer/javascript/tutorial/single-page-application-azure-login-button-sdk-msal

I don't change anythings in project.我不会更改项目中的任何内容。 Just paste client_id into .env file.只需将 client_id 粘贴到.env文件中。

And I also follow the offical doc, create app regidtration, add spa and so on.而且我还按照官方文档,创建应用程序注册,添加水疗等。

在此处输入图像描述

在此处输入图像描述

My test steps:我的测试步骤:

  1. Download sample peoject code from the link you provided.从您提供的链接下载示例项目代码

  2. Open it by vscode, run cmd npm i .用 vscode 打开它,运行 cmd npm i

  3. Copy and paste clientid into .env file.将 clientid 复制并粘贴到.env文件中。

    在此处输入图像描述

  4. Then excute cmd npm run start .然后执行 cmd npm run start It works fine.它工作正常。

    在此处输入图像描述

    在此处输入图像描述

I was also following the MS tutorial and encountered the same problem.我也在关注 MS 教程并遇到了同样的问题。 What I needed to do was:我需要做的是:

  1. Stop the development server (by pressing [CTRL]+[C])停止开发服务器(按 [CTRL]+[C])
  2. Run npm i (I don't now if this step is needed)运行npm i (我现在不知道是否需要此步骤)
  3. Start the development server again: npm run start再次启动开发服务器: npm run start

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 我正在尝试处理登录页面中的异常,但它不起作用 - I am trying to handle exceptions in my login page but its not working 我正在尝试向我的应用程序添加身份验证,但这样做时出现以下映射错误: - I am trying to add authentication to my application, and I am getting the following mapping error when doing so: 如何使用外部登录页面(比如我的 React 登录页面)使用 WSO2 登录 - How to use an external login page(say my React login page) to login using WSO2 在 Microsoft Azure 上基于客户端信用获取访问令牌时出现 CORS 错误 Angular 中 SPA 应用程序上的 AD 身份验证 - Getting CORS error while fetching access token based on client cred on Microsoft Azure AD authentication on SPA app in Angular 管理员和用户从反应和后端的同一登录页面登录我正在使用 firebase - Admin and user login from same login page in react and back end i am using firebase 使用 DialogFlow 登录我的应用程序 - Using DialogFlow to login in my application 我已经使用 PyFlink 配置了我的 Flink 应用程序,但我想更改作业名称 - I have configured my Flink Application using PyFlink, but I want to change the Job Name 由于导入 firebase 配置时出现一些错误,我无法编译我的 React 应用程序 - I am not able to compile my react application beacause of some error of import of firebase config 当登录到使用 Cypress 进行 AAD 身份验证的 Azure 托管应用程序时,url 中的重复 iframe-request-id - Duplicated iframe-request-id in url when login to a Azure hosted app which have AAD authentication using Cypress 我如何知道我的 ansible 角色脚本是否有效? 我正在尝试安装 Azure 模块 - How do I know if my ansible role script worked? I am trying to install Azure Modules
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM