okta使用

Progressive Web Applications (PWAs) are the newest technology on the web dev block and they’ve arrived just in time to solve a growing problem. Many companies are struggling to keep isolated development teams across their organization up-to-date when new features are released. Some companies are even trying to decide if it's worth the cost to develop both a web app and a mobile application. Not surprisingly, it's a headache most companies are looking to avoid. PWAs can give companies a lot of the features they need from a mobile app without the need to manage multiple teams and codebases.

渐进式Web应用程序 （PWA）是Web开发平台上的最新技术，它们已经及时出现，可以解决不断增长的问题。 当发布新功能时，许多公司都在努力使组织中孤立的开发团队保持最新。 一些公司甚至试图确定开发Web应用程序和移动应用程序的成本是否值得。 毫不奇怪，这是大多数公司希望避免的头痛问题。 PWA可以为公司提供移动应用程序所需的许多功能，而无需管理多个团队和代码库。

A PWA performs spectacularly when on a fast connection and still performs well when offline or on Wi-Fi that's not really fast enough to be called Wi-Fi (sometimes called "Lie-Fi"). It does so via caching and a JavaScript "Service Worker" that intercepts server calls and tries to serve the data from cache first, then when the server finally responds, it will replace the cached data with possibly "fresher" data from the server.

PWA在快速连接时表现出色，而在脱机或Wi-Fi上运行时仍然表现良好，而Wi-Fi的速度还不够快，因此无法称为Wi-Fi（有时称为“ Lie-Fi”）。 它通过缓存和JavaScript“服务工作者”来做到这一点，该服务者拦截服务器调用并尝试首先从缓存中提供数据，然后当服务器最终响应时，它将用服务器中可能的“刷新”数据替换缓存的数据。

Recently, the Ionic team released a new project called Stencil. Stencil is a compiler that generates standards-compliant web components. Unlike most JavaScript frameworks, it doesn't deliver a "framework" of code to the browser. It simply takes the code you write and uses its compiler to create vanilla components. You can also use Stencil's compiler with your favorite framework. The Stencil starter project is the easiest way to get started with Stencil and produces a base application that scores nearly a 100% score on Lighthouse's progressive web app scorecard.

最近， Ionic团队发布了一个名为Stencil的新项目。 Stencil是一个生成符合标准的Web组件的编译器。 与大多数JavaScript框架不同，它不会向浏览器交付代码的“框架”。 它仅使用您编写的代码，并使用其编译器来创建普通组件。 您还可以将Stencil的编译器与您喜欢的框架一起使用。 Stencil入门项目是使用Stencil的最简单方法，它可以生成一个基本应用程序，该应用程序在Lighthouse的渐进式Web应用程序记分卡上的得分接近100％。

To get started building a PWA using Stencil, clone the starter application and detach it from the GitHub remote.

要开始使用Stencil构建PWA，请克隆启动程序应用程序并将其与GitHub远程服务器分离。

WARNING: Stencil is not at a 1.0 release yet (as of this writing). So be aware that if you continue, you're in early-adopter territory. If you find bugs, submit an issue.

警告 ：模板尚未发布1.0版本（截至撰写本文时）。 因此请注意，如果继续，您将处于早期采用者的领域。 如果发现错误，请提交问题 。

设置入门应用程序 ( Set Up the Starter Application )

git clone https://github.com/ionic-team/stencil-starter.git first-stencil
cd first-stencil
git remote rm origin

Then, install all the dependencies that your new Stencil app will need.

然后，安装新的Stencil应用程序将需要的所有依赖项。

npm install

You may see a couple of warnings from node-pre-gyp around fsevents. There's nothing to see here. This is just to get around a nasty little npm bug.

您可能会在fsevents周围的node-pre-gyp fsevents看到一些警告。 这里什么也看不到。 这只是为了解决一个讨厌的小npm错误 。

Next, add the Okta auth.js library (via CDN) to the bottom of the index.html page, right before the closing </body> tag.

接下来，将Okta auth.js库（通过CDN）添加到index.html页面的底部，就在结束</body>标记之前。

<script src="https://ok1static.oktacdn.com/assets/js/sdk/okta-auth-js/1.8.0/okta-auth-js.min.js" type="text/javascript"></script>

While there is an npm package for Okta's Auth SDK, Stencil has a hard time compiling it. Overall it works better for now if you just use the CDN to include it.

虽然有Okta的Auth SDK的npm软件包，但Stencil很难编译它。 总体而言，如果您仅使用CDN来包括它，那么它现在效果更好。

@media (max-width: 1280px) { .go-go-gadget-react img:first-child { display: none; } }@media (max-width: 780px) {.go-go-gadget-react { flex-direction: column; }.go-go-gadget-react img { margin-left: 0 !important; margin-bottom: 12px !important; }.header-thingy { margin-top: 20px; }.button-thingy { margin-left: 0 !important; margin-top: 12px !important; }} @media (max-width: 1280px) { .go-go-gadget-react img:first-child { display: none; } }@media (max-width: 780px) {.go-go-gadget-react { flex-direction: column; }.go-go-gadget-react img { margin-left: 0 !important; margin-bottom: 12px !important; }.header-thingy { margin-top: 20px; }.button-thingy { margin-left: 0 !important; margin-top: 12px !important; }}

If you’re like me, the next thing you’ll want to do is run npm start and check the site with Lighthouse. If you do, you’ll notice that the score is kind of low. In particular, it doesn’t register a service worker or return a 200 when offline, That’s because it’s a development build, and generally, you don’t want the service worker intercepting server calls and returning cached data in development.

如果您像我一样，接下来要做的就是运行npm start并使用Lighthouse检查该站点。 如果这样做，您会注意到分数有点低。 特别是，它不会注册服务工作者，也不会在脱机时返回200，这是因为它是开发构建，并且通常，您不希望服务工作者拦截服务器调用并在开发中返回缓存的数据。

To ensure an accurate depiction of the kind of PWA you get out of the box with Stencil, make sure to run a production build using npm run build. Once you do, you’ll see a www folder and inside that folder, you’ll see a sw.js file. That’s your service worker!

为了确保您可以准确地描绘出使用Stencil开箱即用的PWA类型，请确保使用npm run build运行生产 npm run build 。 完成后，您将看到一个www文件夹，并且在该文件夹内，您将看到一个sw.js文件。 那是您的服务人员！

设置您的Okta应用程序 ( Set Up Your Okta Application )

If you haven't already done so, create a free-forever developer account at https://developer.okta.com/signup/.

如果尚未执行此操作，请通过https://developer.okta.com/signup/创建一个永久性的开发者帐户。

Once you've registered, click on Applications in the top menu. Then click Add Application.

注册后，单击顶部菜单中的“ 应用程序 ”。 然后单击“ 添加应用程序” 。

You will then be taken to the application creation wizard. Choose Single-Page App and click Next at the bottom.

然后，您将进入应用程序创建向导。 选择“ 单页应用程序” ，然后单击底部的“ 下一步 ”。

On the next screen, you’ll see the default settings provided by the single-page application template. Change the name of the application to something more descriptive, like "Stencil SPA". Also, change the base URIs and the login redirect URIs settings to use port 3333 because that’s where your application will be running. The rest of the default settings are fine.

在下一个屏幕上，您将看到单页应用程序模板提供的默认设置。 将应用程序的名称更改为更具描述性的名称，例如“ Stencil SPA”。 另外，将基本URI和登录重定向URI设置更改为使用端口3333，因为这是应用程序将在其中运行的地方。 其余的默认设置都可以。

Then click Done at the bottom.

然后点击底部的完成 。

Once the application has been created, select it from the applications listing, and click on the General tab to view the general settings for your application.

创建应用程序后，从应用程序列表中选择它，然后单击“ 常规”选项卡以查看您的应用程序的常规设置。

At the bottom, you’ll see a Client ID setting (yours won't be blurred out, obviously). Copy this to use in your Stencil application. You will also need your Okta organization URL, which you can find at the top right of the dashboard page. It will probably look something like “https://dev-XXXXXX.oktapreview.com”.

在底部，您会看到一个Client ID设置（很明显，您不会感到困惑）。 复制它以在您的Stencil应用程序中使用。 您还将需要您的Okta组织URL，您可以在仪表板页面的右上角找到该URL。 它可能看起来像“ https://dev-XXXXXX.oktapreview.com” 。

添加身份验证组件 ( Add the Authentication Component )

In the components folder, add a new folder called app-auth. This is where your login page component will go. You can call it whatever you want, I'm just following the naming conventions set out by the starter app here. I'd definitely recommend deciding on a naming convention early and sticking with it.

在components文件夹中，添加一个名为app-auth的新文件夹。 这是您的登录页面组件所在的位置。 您可以随心所欲地调用它，我只是遵循此处的入门应用程序设置的命名约定。 我绝对建议您尽早决定命名惯例并坚持使用。

Inside the newly created app-auth folder create two files: app-auth.css and app-auth.tsx. Start by creating the shell of the app-auth.tsx file.

在新创建的app-auth文件夹中，创建两个文件： app-auth.css和app-auth.tsx 。 首先创建app-auth.tsx文件的外壳。

import { Component } from "@stencil/core";@Component({tag: "app-auth",styleUrl: "app-auth.css"
})
export class AppAuth {render() {return <div>Hello</div>;}
}

If you are like I was, you might be thinking, "What kind of Frankenstein framework is this?"

如果像我一样，您可能会想：“这是什么样的科学怪人框架？”

You'll notice the @Component decorator over the AppAuth class declaration like Angular, and then a render() method at the bottom like React. To me, that's the beauty of Stencil. It takes some of the best parts of both popular frameworks and uses them to compile reusable components!

您会在AppAuth类声明（如Angular）上看到@Component装饰器，然后在底部像React一样看到render()方法。 对我来说，这就是模具的美。 它吸收了两个流行框架的一些最佳部分，并使用它们来编译可重用的组件！

添加登录表格 ( Add a Login Form )

Next, you'll add the JSX (that's right, I said it) to the new component. Change the render() method to:

接下来，将JSX（我说对了）添加到新组件中。 将render()方法更改为：

render() {return (<form class="app-auth"><div class="form-item"><label>Username:<input type="text" name="username" autocomplete="username" /></label></div><div class="form-item"><label>Password:<inputtype="password"name="password"autocomplete="current-password"/></label></div><div class="form-actions"><button type="button" onClick={() => this.login()}>Login</button></div></form>);
}

This is just a regular JSX form, but the login button's onClick event is currently wired to function that doesn't exist.

这只是一个普通的JSX表单，但是登录按钮的onClick事件目前已连接到不存在的功能。

添加登录方法的依赖项 ( Add the Login Method's Dependencies )

Before you create that function, you'll need to set up the OktaAuth JavaScript object to call the Okta API for authentication. You'll add the object to the component's state, so right below the class declaration, add the following line:

在创建该函数之前，您需要设置OktaAuth JavaScript对象以调用Okta API进行身份验证。 您将对象添加到组件的状态，因此在类声明的正下方添加以下行：

@State() authClient: any;

You will also have to import the @State() decorator. This is is used for values related to the internal state of the component. In the first import statement add 'State' to the deconstruction list.

您还必须导入@State()装饰器。 这用于与组件内部状态有关的值。 在第一个import语句中，将'State'添加到解构列表中。

import { Component, State } from '@stencil/core'

You'll also need to get the username and password values from the form itself, so add an @Element() to the code right below that @State() like you just created, so it read like this:

您还需要从表单本身获取用户名和密码值，因此像刚刚创建的那样，在@State()下方的代码中添加@Element() ，其内容如下：

@State() authClient: any;
@Element() host: HTMLElement;

Then also add the @Element() decorator to the import so it reads:

然后还将@Element()装饰器添加到导入中，使其显示为：

import { Component, State, Element } from '@stencil/core';

One last thing that the login() function will need is access to the router, so you can redirect the user to their profile page if their authentication is successful.You'll need a class property, so add it right below the @Element.

login()函数需要做的最后一件事是访问路由器，因此，如果用户的身份验证成功，则可以将用户重定向到其个人资料页面。您将需要一个类属性，因此请将其添加到@Element下方。

@State() authClient: any;
@Element() host: HTMLElement;
@Prop() history: RouterHistory;

To import it, add the @Prop() decorator to the main import and then import the RouterHistory from @stencil/router right below the core import statement. The @Prop decorator is used to define properties that can be passed in to your component. In this case, it's not a passed in value, but it could be if need be. Your final import section should read:

要导入它，请将@Prop()装饰器添加到@Prop()入中，然后从核心导入语句下方的@stencil/router导入RouterHistory 。 @Prop装饰器用于定义可以传递到组件中的属性。 在这种情况下，它不是传递的值，但是如果需要的话也可以。 最后的导入部分应显示为：

import { Component, Prop, State, Element, Listen } from "@stencil/core";
import { RouterHistory } from "@stencil/router";

Finally, to use the OktaAuth JavaScript library you brought in from the CDN, add a declaration for it right below the import statements.

最后，要使用从CDN引入的OktaAuth JavaScript库，请在import语句下方为其添加一个声明。

declareconst OktaAuth:any;

添加登录方法 ( Add the Login Method )

Now you included everything you'll need to get the login function to authenticate users with your Okta organization. First, set up the OktaAuth object in the constructor of the AppAuth class. Right below the property for the RouterHistory object, add:

现在，您包括了获得登录功能以通过Okta组织对用户进行身份验证所需的一切。 首先，在AppAuth类的构造函数中设置OktaAuth对象。 在RouterHistory对象的属性下面，添加：

constructor() {this.authClient = new OktaAuth({clientId: "{yourClientId}",url: "{yourOktaDomain}",issuer: "default"});
}

You can get your Client Id from that general settings page of your Okta application.

您可以从Okta应用程序的常规设置页面获取客户ID。

You'll also need your Okta org URL, from the upper-right side of the Okta dashboard page.

您还需要Okta仪表板页面右上角的Okta组织URL。

Now everything is set up for the login() function, so you'll create that next. Right above the render() method, add a login() function.

现在，一切都已为login()函数设置好了，因此接下来将创建它。 在render()方法上方，添加一个login()函数。

login() {let inputs = this.host.querySelectorAll("input");let user = {username: inputs[0].value, password: inputs[1].value };return this.authClient.signIn(user).then(res => {if (res.status === "SUCCESS") {return this.authClient.token.getWithoutPrompt({responseType: "id_token",scopes: ["openid", "profile", "email"],sessionToken: res.sessionToken,redirectUri: "http://localhost:3333"}).then(token => {localStorage.setItem('okta_id_token', JSON.stringify(token));this.history.push("/profile", {});});} else {throw `Unable to handle ${res.status} status code`;}}).fail(function(err) {console.error(err);});
}

Since is really the "meat" of the component, I'll walk you through what's going on here.

由于实际上是组件的“实质”，所以我将带您逐步了解这里发生的情况。

The first thing, is getting all the inputs inside the form element of the component. Then a user object is created with the username and password from their respective inputs.

首先，将所有输入都放入组件的form元素内。 然后，使用用户名和密码从其各自的输入中创建用户对象。

Next the authClient object is used to call the signIn() method with the user object that was created. It returns a promise, so you handle the then condition by getting the response and check to see if the response's status is a 200. If it is, call the authClient.token's getWithoutPrompt() method which also returns a promise. It takes a responseType property which is set to 'id_token', because that's what you want to get from Okta. You've also asked for three scopes that will give you the 'openid', profile, and email data associated with the newly authenticated user. The method need the session token returned from the signIn() method's response. Finally, you've told the function to call back to the redirectUri, which was set as a trusted redirect origin in Okta when you created your application.

接下来， authClient对象用于与创建的用户对象一起调用signIn()方法。 它返回一个Promise，因此您可以通过获取响应来处理then条件，并检查响应的状态是否为200。如果是，则调用authClient.token的getWithoutPrompt()方法，该方法也将返回getWithoutPrompt() 。 它需要一个responseType属性，该属性设置为'id_token'，因为这就是您想从Okta获得的。 您还要求提供三个范围，这些范围将为您提供与新认证的用户相关联的“ openid”，个人资料和电子邮件数据。 该方法需要从signIn()方法的响应返回的会话令牌。 最后，您已告诉该函数回调redirectUri ，该URL在创建应用程序时被设置为Okta中的受信任重定向源。

In the 'then' condition of this promise, you take the id token received and set it in local storage as 'okta_id_token'. If all that worked, the user is redirected to the profile page.

在此承诺的“然后”条件下，您将接收到的ID令牌设为本地令牌，并将其设置为“ okta_id_token”。 如果一切正常，则将用户重定向到个人资料页面。

If the response had a status of anything other than 200, it merely throws an error that says it can't handle any other statuses. Finally, the fail condition for the signIn() method call simply logs any errors to the console.

如果响应的状态不是200，则只会抛出一个错误，表明它无法处理其他任何状态。 最后， signIn()方法调用的失败条件只是将所有错误记录到控制台。

简化登录 ( Simplify Login )

While this works, there are two things that would make this component a little nicer: being able to hit enter to log in instead of having to click the login button, and not even showing the login form if the person tries to go the login page when they're already logged in.

在此过程中，有两件事会使该组件变得更好一点：能够按Enter键登录而不用单击“登录”按钮；如果该人尝试进入登录页面，甚至不显示登录表单。他们已经登录时。

To achieve this, add a method to take the user directly to the profile page if they're already logged in. Like React components, Stencil components have lifecycle methods. Instead of componentWillMount() for React, Stencil has a componentWillLoad() method, so that's what you'll use here.

为此，请添加一种方法，以将用户直接登录到个人资料页面（如果已登录）。与React组件一样，Stencil组件也具有生命周期方法。 取而代之的componentWillMount()的React，模板有一个componentWillLoad()方法，所以这是什么，你会在这里使用。

componentWillLoad() {let idToken = localStorage.getItem("okta_id_token");if(idToken){this.history.push("/profile", {});}
}

Simply put, all you're doing is reading the token from local storage. If one exists, you're assuming they are logged in and redirecting them to the profile page.

简而言之，您要做的就是从本地存储中读取令牌。 如果存在，则假定它们已登录并将其重定向到个人资料页面。

The last thing that will make this login form easier to use is to add the ability to submit the form with the enter key. Stencil has some built-in listeners for key presses. In this case, use the 'keydown.enter' listener. Import the @Listen() decorator in the very top import statement where you imported Component.

使此登录表单更易于使用的最后一件事是添加使用Enter键提交表单的功能。 Stencil具有一些内置的按键监听器。 在这种情况下，请使用“ keydown.enter”侦听器。 在导入Component的最顶层import语句中导入@Listen()装饰器。

import { Component, Prop, State, Element, Listen } from "@stencil/core";

Then add a handler for the 'keydown.enter' event just below the componentWillLoad() function.

然后在componentWillLoad()函数下方添加一个'keydown.enter'事件的处理程序。

@Listen("keydown.enter")
handleEnter() {this.login();
}

更新配置文件页面 ( Update the Profile Page )

Now that you have a nice login page, update the profile page so that it shows the user's claims once they're logged in.

现在您已经拥有了一个不错的登录页面，请更新个人资料页面，以便在用户登录后显示用户的声明。

First, you’ll need a type to put the user’s claims in. So create a new file in the app-profile folder called AppUser.tsx. The contents are simple, but long. I simply looked at all the claims in the token stored in localStorage and created an interface that matched it. So the AppUser.tsx file is as follows:

首先，您需要输入用户声明的类型。因此，在app-profile文件夹中创建一个名为AppUser.tsx的新文件。 内容很简单，但是很长。 我只是查看了存储在localStorage中的令牌中的所有声明，并创建了与其匹配的接口。 因此， AppUser.tsx文件如下：

interface AppUser {sub: string;name: string;locale: string;email: string;ver: number;iss: string;aud: string;iat: number;exp: number;jti: string;amr: string[];idp: string;nonce: string;nickname: string;preferred_username: string;given_name: string;family_name: string;zoneinfo: string;updated_at: number;email_verified: boolean;auth_time: number;
}

Once you have a type to declare for your profile's user object, update the app-profile.tsx file.

在为您的配置文件的用户对象声明类型后，更新app-profile.tsx文件。

The imports at the top should look like:

顶部的导入应如下所示：

import { Component, Prop, State } from "@stencil/core";
import { RouterHistory } from "@stencil/router";

Remove the @Prop() line for match and replace is with:

删除@Prop()行以进行match并替换为：

@Prop() history: RouterHistory;
@State() user: AppUser;
@Prop({ context: "isServer" }) private isServer: boolean;

The isServer property is a special property. Because Stencil supports prerendering and localStorage may not be available during prerender, you'll need to wrap the localStorage calls in an if(!isServer){} to make sure it will build for production. This shouldn't stop it from working, it's just a work around for the build process.

isServer属性是一个特殊属性。 因为Stencil支持预渲染，并且在预渲染期间localStorage可能不可用，所以您需要将localStorage调用包装在if(!isServer){} ，以确保它将为生产而构建。 这不应阻止它正常工作，而只是构建过程中的一个解决方法。

For the componentWillLoad() method, just read in the user information from the 'okta_id_token' in local storage:

对于componentWillLoad()方法，只需从本地存储中的“ okta_id_token”中读取用户信息：

componentWillLoad() {if(!this.isServer){let token = JSON.parse(localStorage.getItem("okta_id_token"));if (token) {this.user = token.claims;} else {this.history.push("/login", {});}}
}

This will be your protector for the profile page as well, it just checks if the token exists. If so, it loads the claims from it. If not, it redirects to the login page.

这也是个人资料页面的保护者，它只是检查令牌是否存在。 如果是这样，它将从中加载索赔。 如果不是，它将重定向到登录页面。

For the render() method, change it to display the claims in a list.

对于render()方法，对其进行更改以在列表中显示声明。

render() {if(this.user){let keys = Object.keys(this.user);return <div class="app-profile"><h2>User Claims</h2><ul>{keys.map(key => <li><span>{key}</span>: {this.user[key]}</li>)}</ul><button onClick={this.logout}>Logout</button></div>;}
}

The only thing left is to add the logout() method. This will just remove the token from local storage and reload the page, this will force the componentWillLoad() to redirect the user to the login page.

剩下的唯一事情就是添加logout()方法。 这只会从本地存储中删除令牌并重新加载页面，这将迫使componentWillLoad()将用户重定向到登录页面。

logout() {if(!this.isServer){localStorage.removeItem("okta_id_token");location.reload();}
}

设置登录路径 ( Set Up the Login Route )

The only thing left is to add the route to the login component to the application so that users can get there.

剩下的唯一事情就是将通往登录组件的路由添加到应用程序中，以便用户可以到达那里。

In the components/my-app/my-app.tsx file add the route inside the stencil-router component so that the final section looks like this:

在components/my-app/my-app.tsx文件中，在stencil-router组件内部添加路由，以便最后一部分如下所示：

<stencil-router><stencil-route url="/" component="app-home" exact={true} /><stencil-route url="/profile" component="app-profile" /><stencil-route url="/login" component="app-auth" />
</stencil-router>

You'll also need to update the route for the link on the home page. In components/app-home/app-home.tsx update the stencil-route-link element's url to no longer pass in the url parameter.

您还需要更新主页上链接的路由。 在components/app-home/app-home.tsx将stencil-route-link元素的url更新为不再传递url参数。

<stencil-route-link url='/profile'><button>Profile page</button>
</stencil-route-link>

That's it! You should now be able to run the app, click on the profile page, get redirected to the login page, and be redirected back to the profile page once you've logged in. The profile page should show all your claims after you've authenticated.

而已！ 现在，您应该能够运行该应用程序，单击个人资料页面，重定向到登录页面，并在登录后重定向回个人资料页面。个人资料页面应显示您的所有声明。已验证。

Congratulations, you now have a PWA with authentication in it, ready to go conquer the world!

恭喜，您现在已经拥有一个带有身份验证的PWA，随时可以征服世界！

添加样式 ( Add Styles )

As extra credit, you might want to add some styling to the login form and the profile page. Below is my style sheet for the login page that goes in app-auth.css:

作为额外的奖励，您可能需要在登录表单和个人资料页面中添加一些样式。 以下是我在app-auth.css登录页面的样式表：

.app-auth{width: 30%;margin: 2rem auto;
}
.app-auth .form-item{padding: .25rem;
}
.app-auth label{width: 100%;font-size: 1rem;color: #999;
}.app-auth label input{width: 97%;border-radius: .25rem;font-size: 1.5rem;
}.app-auth .form-actions{text-align: right;
}

Finally, in app-profile.css just some simple styles to bold the label of each item.

最后，在app-profile.css仅提供一些简单的样式来加粗每个项目的标签。

.app-profile {padding: 10px;
}.app-profile ul li span{font-weight: bold;
}

Now when you run the app, you will see a nicely styled application, ready for the web!

现在，当您运行该应用程序时，您将看到一个样式精美的应用程序，可随时用于网络！

学到更多 ( Learn More )

To learn more about PWAs, check out Matt Raible's ultimate guide to PWAs on the Okta developer blog.

要了解有关PWA的更多信息，请在Okta开发人员博客上查看Matt Raible的PWA终极指南 。

If you want to know more about Ionic apps, check out Matt's blog post about building Ionic apps.

如果您想了解有关Ionic应用程序的更多信息，请查看Matt的有关构建Ionic应用程序的博客文章。

You can learn about building a basic CRUD app with VueJS from Brandon Parise's post.

您可以从Brandon Parise的帖子中了解有关使用VueJS构建基本的CRUD应用程序的信息 。

Finally, right here you can see how to set up user registration with Node and React!

最后，在这里您可以看到如何使用Node和React设置用户注册 ！

As always, if you have any questions you can comment below or hit me up on Twitter @leebrandt and don't forget to follow @OktaDev for great content from our communities + all the news about Okta's developer platform!

与往常一样，如果您有任何问题，可以在下面发表评论或在Twitter @leebrandt上打我，并且不要忘记关注@OktaDev，以获取我们社区的精彩内容以及有关Okta开发人员平台的所有新闻！

翻译自: https://scotch.io/tutorials/add-auth-to-your-pwa-using-stencil-and-okta

okta使用