DR：在这篇文章中，您将学习如何使用Ionic的Auth Connect插件为Ionic Angular移动应用程序添加Auth0登录和注销体验。要查看完整的工作示例，请看一下这个GitHub repo。什么是离子骨架？Ionic框架是一个开源的UI工具包，用于使用web技术（HTML、CSS和JavaScript）构建高性能、高质量的移动和桌面应用程序。它专注于前端用户体验，提供开箱即用的UI交互（控件、交互、手势、动画），这样开发者就可以专注于构建他们应用程序的独特方面。它很容易学习，并且可以很好地与其他框架集成，比如Angular、React或Vue。"Ionic框架是一个开源的UI工具包，用于使用web技术构建高性能、高质量的移动和桌面应用程序。"在推特上留言什么是Ionic Auth Connect？Ionic Auth Connect可以轻松地为任何运行在iOS、Android或web上的Ionic应用程序添加安全身份验证。它使用简单、功能强大的API，使用行业标准OAuth或OpenID Connect处理用户身份验证和向身份验证提供者（如Auth0）注册。注意：Auth Connect需要一个离子本机密钥才能安装和使用Ionic Auth Connect插件。Ionic Native包括一组可靠的本地API和功能，可以在您的Ionic应用程序中使用，质量由Ionic团队控制和维护。如果您有兴趣获得钥匙或了解更多，请联系爱奥尼亚。你要建造什么？在本教程中，您将使用Ionic框架的UI组件在Ionic Angular应用程序中创建登录页面和主页。只需几行代码，就可以通过使用Auth Connect本机插件添加Auth0登录/注销功能来保护主页。以下是整个应用程序的实际效果："为Ionic Angular移动应用程序添加Auth0登录和注销体验！"在推特上留言先决条件为了遵循本教程，需要以下工具：npm和Node:Ionic项目是使用现代web技术构建的，请下载并安装Node和npm，这是流行的JavaScript包管理器。Xcode和/或Android Studio，以及一个移动设备：您将把应用部署到您选择的移动设备上，因此需要iOS和Android原生工具。Xcode可从Mac应用商店下载，Android Studio可从官方Android Studio网站下载。代码编辑器：visualstudio代码是一个很好的选择。正在配置Auth0在创建Ionic应用程序之前，您将启动并运行Auth0。如果您还没有，请在这里创建一个免费的Auth0帐户，然后转到应用程序页面并单击"创建应用程序"按钮。为新应用程序命名，然后为应用程序类型选择"本机"。然后单击"创建"。注意：域和客户端ID可以在"设置"选项卡下找到。接下来，大淘客怎么推广，选择全局唯一的App Id，它在Auth0配置和Cordova/Capacitor中都使用。通常，这采用"公司应用程序名"或反向DNS样式的形式-com.company.app网站."有了它，就可以设置允许的回调url。在应用程序用户登录到Auth0后，这将告诉Auth Connect在应用程序中重定向到哪个页面。使用公式"uniqueId://页，如"公司"-AppName://回调。"类似地，设置允许的注销url，它告诉Auth Connect在用户注销Auth0后重定向到哪里。再次使用"uniqueId://页"格式。通常，大数据好不好，应用程序会将用户重定向到登录页面，所以考虑使用"公司"-AppName://登录。"Auth0现在可以在您的Ionic应用程序中使用了。创建新的Ionic应用程序设置了Auth0应用程序后，是时候使用终端创建一个Ionic应用程序了：#安装Ionic CLInpm安装-g离子#使用"blank"Ionic starter模板创建一个名为"ac-auth0"的新应用程序离子启动ac-auth0空白接下来，切换到新的项目目录，然后运行ionic serve来启动一个在浏览器中启动的本地开发服务器。它使应用程序开发更容易，因为当检测到源文件的更改时，它会自动重新加载应用程序。cd ac-auth0爱奥尼亚发球应用程序加载到web浏览器中，自动显示主页。设计登录页面打开代码编辑器，然后导航到主页.html在src/app/home下。您将看到类似以下内容：离子空白

世界就是你的牡蛎。

如果你迷路了，文档将作为您的指南

这是您将在Auth0登录体验后保护的主页。稍后将更新设计。接下来，创建登录页面：离子生成页面登录这将创建一个几乎为空的页面，看起来像：登录接下来，提示用户使用一些文本和按钮组件登录。稍后将实现click处理程序。欢迎光临！

请登录您的帐户：

登录安装Cordova/电容器和Auth Connect让我们暂停一下代码，安装这个项目的本机部分。Auth-Connect插件可以同时使用Cordova和Capacitor这两个OSS原生应用程序运行时。在安装这些项目之前，请先添加这些身份验证。首先，如果您选择了Cordova并且已经安装了它，电力物联网，请卸载它，然后安装@ionic enterprise版本。爱奥尼亚团队需要创建它，以解决一个带有范围包的Cordova bug。它也与原始项目向后兼容。npm卸载-g cordovanpm安装-g@ionic enterprise/cordova接下来，添加您选择的平台：#添加本机平台（ios或android）爱奥尼亚科尔多瓦平台add[平台]对于电容器，运行以下步骤：#安装电容器（本项目本地）离子集成使电容器#初始化应用程序，其中appName是应用程序的名称#appId是应用程序的域标识符（例如：com.company.app网站)离子帽初始化[appName][appId]#创建项目一次爱奥尼亚建筑#添加本机平台（ios或android）离子帽添加[平台]接下来，不管您选择的是哪种本机运行时，都要运行以下命令来安装Auth Connect插件。对于AUTH_URL_SCHEME变量，请使用全局唯一的App Id（例如：com.company.app网站)您在配置上面的Auth0应用程序时决定了。#安装Auth Connect插件ionic cordova插件add@ionic enterprise/auth—变量auth_URL_SCHEME=com.company.app网站实现Ionic Auth Connect基本的登录组件现在已经准备好了—在继续构建应用程序的UI之前，您需要创建一个AuthenticationService类，软件企业有哪些，该类封装了Auth0和Ionic Auth Connect的登录功能。再次使用离子生成命令生成此类：离子生成服务/认证下面是完整的类实现：//src/应用程序/服务/身份验证.service.ts从"@angular/core"导入{Injectable}；从'@ionic enterprise/auth'导入{IonicAuth，IonicAuthOptions}；从'@ionic/angular'导入{Platform}；从"@angular/Router"导入{Router}；@可注射的({providedIn:'根'})导出类AuthenticationService扩展了IonicAuth{专用路由器：路由器；私有加载指示符：HTMLIonLoadingElement；构造器（路由器：路由器，plt：平台）{const auth0Config:IonicAuthOptions={//身份验证提供程序authConfig:'auth0'，//运行应用程序的平台platform:'科尔多瓦'，//提供程序的客户端或应用程序idclientID:'填写'，//提供程序的发现url//OpenID配置discoveryUrl:'填充'，//登录后要重定向到的URIredirectUri:'填写'，//从提供程序请求的作用域scope:'openid脱机访问电子邮件图片配置文件'，//观众，如果适用的话观众：'填写'，//注销后重定向到的URLlogoutUrl:'填写'，//要使用的iOS webview的类型"共享"将使用可以//在iOS上共享会话/Cookie以跨多个应用程序提供SSO，淘客是啥，但是//会给用户提示，要求用户确认他们想要的//与应用程序共享站点数据private'使用的webview将//不提示用户，但无法共享会话/cookie数据//对于跨多个应用程序的真正SSO。iosWebView:'私有'，//如果在Web上运行，则为必需clientSecret:""};超级（auth0Config）；这个。路由器=路由器；}异步登录（loadingIndicator:any）{装载指示器=装载指示器；等待超级登录();}异步onloginsaccess（响应：any）{等待this.router.navigate（['家']）；此加载指示灯。关闭();}异步onLogout（）{this.router.navigate（['login']）；}异步注销（）{超级注销();}异步isAuthenticated（）{返回等待超级。我认证了();}异步getUserInfo（）{返回等待代币.idsuper();}}其中一些IonicAuthOptions值是uniqu