Skip to content

Commit

Permalink
Merge branch 'v5' of github.com:Authing/Guard into v5
Browse files Browse the repository at this point in the history
  • Loading branch information
@zhaoyiming0803
zhaoyiming0803 committed Jul 10, 2023
2 parents c420e44 + 285281d commit e32a222
Show file tree
Hide file tree
Showing 3 changed files with 41 additions and 45 deletions.
12 changes: 6 additions & 6 deletions docs/guide/essentials/events.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,11 @@

```tsx
// React 16 / 17
// 代码示例：https://github.com/Authing/Guard/blob/master/examples/guard-react/normal/src/pages/Embed.tsx
// 代码示例：https://github.com/Authing/Guard/tree/v5/examples/guard-react/normal/src/pages/Embed.tsx
import { useGuard, User } from "@authing/guard-react";

// React 18
// 代码示例：https://github.com/Authing/Guard/blob/master/examples/guard-react18/normal/src/pages/Embed.tsx
// 代码示例：https://github.com/Authing/Guard/tree/v5/examples/guard-react18/normal/src/pages/Embed.tsx
// import { useGuard, User } from "@authing/guard-react18";

import React, { useEffect } from "react";
Expand Down Expand Up @@ -46,7 +46,7 @@ export default function Login() {
::: tab Vue2

```javascript
// 代码示例：https://github.com/Authing/Guard/blob/master/examples/guard-vue2/normal/src/views/Embed.vue
// 代码示例：https://github.com/Authing/Guard/tree/v5/examples/guard-vue2/normal/src/views/Embed.vue
export default {
mounted() {
// 使用 start 方法挂载 Guard 组件到你指定的 DOM 节点，登录成功后返回 userInfo
Expand All @@ -69,7 +69,7 @@ export default {

```html
<script lang="ts" setup>
// 代码示例：https://github.com/Authing/Guard/blob/master/examples/guard-vue3/normal/src/views/Embed.vue
// 代码示例：https://github.com/Authing/Guard/tree/v5/examples/guard-vue3/normal/src/views/Embed.vue
import { onMounted } from "vue";
import { useGuard } from "@authing/guard-vue3";
Expand Down Expand Up @@ -98,7 +98,7 @@ export default {
::: tab Angular

```typescript
// 代码示例：https://github.com/Authing/Guard/blob/master/examples/guard-angular/normal/src/app/pages/embed/embed.component.ts
// 代码示例：https://github.com/Authing/Guard/tree/v5/examples/guard-angular/normal/src/app/pages/embed/embed.component.ts
import { Component, ChangeDetectorRef } from "@angular/core";

import { GuardService, User } from "@authing/guard-angular";
Expand Down Expand Up @@ -132,7 +132,7 @@ export class EmbedComponent {

::: tab CDN
```javascript
// 代码示例：https://github.com/Authing/Guard/blob/master/examples/guard/normal/embed.html
// 代码示例：https://github.com/Authing/Guard/tree/v5/examples/guard/normal/embed.html
guard.on("login", (userInfo) => {
// 自定义登录成功后的业务逻辑
// 比如跳转到对应的某个页面等
Expand Down
72 changes: 34 additions & 38 deletions docs/guide/essentials/mode.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,6 @@

## 使用托管模式

::: hint-info
使用托管模式会涉及到路由跳转，Safari、Firefox 等浏览器默认开启『阻止跨站跟踪』，导致 Cookie 无法有效传输，推荐使用 Chrome 浏览器。目前已有解决方案，我们接下来会修复这个问题。
:::

托管模式将跳转到 Authing 提供的托管登录页。由于此模式 Authing 默认使用 OIDC 标准协议认证，你需要进行以下额外配置：

- 在 [Authing 控制台](https://console.authing.cn) 的 <strong>应用 -> 自建应用 -> 应用详情</strong> 中配置 <strong>登录回调 URL</strong>，回调地址为下述示例代码中 Callback 页面地址，此处以 `http://localhost:3000/callback` 为例：
Expand Down Expand Up @@ -49,11 +45,11 @@
// Jump.tsx

// React16 / 17
// 代码示例：https://github.com/Authing/Guard/blob/master/examples/guard-react/normal/src/pages/Jump.tsx
// 代码示例：https://github.com/Authing/Guard/tree/v5/examples/guard-react/normal/src/pages/Jump.tsx
import { useGuard } from "@authing/guard-react";

// React 18
// 代码示例：https://github.com/Authing/Guard/blob/master/examples/guard-react18/normal/src/pages/Jump.tsx
// 代码示例：https://github.com/Authing/Guard/tree/v5/examples/guard-react18/normal/src/pages/Jump.tsx
// import { useGuard } from '@authing/guard-react18';

export default function Jump() {
Expand All @@ -78,11 +74,11 @@ export default function Jump() {
// Callback.tsx

// React 16 / 17
// 代码示例：https://github.com/Authing/Guard/blob/master/examples/guard-react/normal/src/pages/Callback.tsx
// 代码示例：https://github.com/Authing/Guard/tree/v5/examples/guard-react/normal/src/pages/Callback.tsx
import { JwtTokenStatus, useGuard, User } from '@authing/guard-react';

// React 18
// 代码示例：https://github.com/Authing/Guard/blob/master/examples/guard-react18/normal/src/pages/Callback.tsx
// 代码示例：https://github.com/Authing/Guard/tree/v5/examples/guard-react18/normal/src/pages/Callback.tsx
// import { JwtTokenStatus, useGuard, User } from '@authing/guard-react18';

import React, { useEffect } from 'react';
Expand Down Expand Up @@ -138,11 +134,11 @@ export default function Callback() {
// Personal.tsx

// React 16 / 17
// 代码示例：https://github.com/Authing/Guard/blob/master/examples/guard-react/normal/src/pages/Personal.tsx
// 代码示例：https://github.com/Authing/Guard/tree/v5/examples/guard-react/normal/src/pages/Personal.tsx
import { useGuard, User } from '@authing/guard-react';

// React 18
// 代码示例：https://github.com/Authing/Guard/blob/master/examples/guard-react18/normal/src/pages/Personal.tsx
// 代码示例：https://github.com/Authing/Guard/tree/v5/examples/guard-react18/normal/src/pages/Personal.tsx
// import { useGuard, User } from '@authing/guard-react18';

import React, { useEffect, useState } from 'react';
Expand Down Expand Up @@ -175,7 +171,7 @@ export default function Personal() {
::: tab Vue2

```javascript
// 代码示例：https://github.com/Authing/Guard/blob/master/examples/guard-vue2/normal/src/views/Jump.vue
// 代码示例：https://github.com/Authing/Guard/tree/v5/examples/guard-vue2/normal/src/views/Jump.vue
// Jump.vue
export default {
methods: {
Expand All @@ -188,7 +184,7 @@ export default {
```

``` javascript
// 代码示例：https://github.com/Authing/Guard/blob/master/examples/guard-vue2/normal/src/views/Callback.vue
// 代码示例：https://github.com/Authing/Guard/tree/v5/examples/guard-vue2/normal/src/views/Callback.vue
// Callback.vue
export default {
data () {
Expand Down Expand Up @@ -238,7 +234,7 @@ export default {
``` html
<template>
<div class="personal-container">
<!-- 代码示例：https://github.com/Authing/Guard/blob/master/examples/guard-vue2/normal/src/views/Personal.vue -->
<!-- 代码示例：https://github.com/Authing/Guard/tree/v5/examples/guard-vue2/normal/src/views/Personal.vue -->
<!-- Personal.vue -->
<textarea id="" cols="100" rows="30" :value="userInfo"></textarea>
</div>
Expand Down Expand Up @@ -269,7 +265,7 @@ export default {
::: tab Vue3

```javascript
// 代码示例：https://github.com/Authing/Guard/blob/master/examples/guard-vue3/normal/src/views/Jump.vue
// 代码示例：https://github.com/Authing/Guard/tree/v5/examples/guard-vue3/normal/src/views/Jump.vue
// Jump.vue
import { useGuard } from "@authing/guard-vue3";

Expand All @@ -284,7 +280,7 @@ const startWithRedirect = () => {
``` html
<template>
<div class="personal-container">
<!-- 代码示例：https://github.com/Authing/Guard/blob/master/examples/guard-vue3/normal/src/views/Callback.vue -->
<!-- 代码示例：https://github.com/Authing/Guard/tree/v5/examples/guard-vue3/normal/src/views/Callback.vue -->
<!-- Callback.vue -->
<textarea id="" cols="100" rows="30" :value="userInfo"></textarea>
</div>
Expand Down Expand Up @@ -346,7 +342,7 @@ onMounted(() => {
``` html
<template>
<div class="personal-container">
<!-- 代码示例：https://github.com/Authing/Guard/blob/master/examples/guard-vue3/normal/src/views/Personal.vue -->
<!-- 代码示例：https://github.com/Authing/Guard/tree/v5/examples/guard-vue3/normal/src/views/Personal.vue -->
<!-- Personal.vue -->
<textarea id="" cols="100" rows="30" :value="userInfo"></textarea>
</div>
Expand Down Expand Up @@ -378,7 +374,7 @@ onMounted(() => {
::: tab Angular

```typescript
// 代码示例：https://github.com/Authing/Guard/blob/master/examples/guard-angular/normal/src/app/pages/jump/jump.component.ts
// 代码示例：https://github.com/Authing/Guard/tree/v5/examples/guard-angular/normal/src/app/pages/jump/jump.component.ts
// jump.component.ts
// Angular 组件中使用 Guard API
import { Component } from "@angular/core";
Expand All @@ -403,7 +399,7 @@ export class HomeComponent {
```

``` typescript
// 代码示例：https://github.com/Authing/Guard/blob/master/examples/guard-angular/normal/src/app/pages/callback/callback.component.ts
// 代码示例：https://github.com/Authing/Guard/tree/v5/examples/guard-angular/normal/src/app/pages/callback/callback.component.ts
// callback.component.ts
import { Component } from '@angular/core'
import { Router } from '@angular/router'
Expand Down Expand Up @@ -464,7 +460,7 @@ export class CallbackComponent {
```

``` typescript
// 代码示例：https://github.com/Authing/Guard/blob/master/examples/guard-angular/normal/src/app/pages/personal/personal.component.ts
// 代码示例：https://github.com/Authing/Guard/tree/v5/examples/guard-angular/normal/src/app/pages/personal/personal.component.ts
// personal.component.ts
import { Component } from '@angular/core'

Expand Down Expand Up @@ -496,7 +492,7 @@ export class PersonalComponent {
::: tab CDN

```javascript
// 代码示例：https://github.com/Authing/Guard/blob/master/examples/guard/normal/jump.html
// 代码示例：https://github.com/Authing/Guard/tree/v5/examples/guard/normal/jump.html
// jump.html
const guard = new GuardFactory.Guard({
// 你可以前往 Authing 控制台的本应用详情页查看你的 App ID
Expand All @@ -517,7 +513,7 @@ function startWithRedirect() {
```

``` javascript
// 代码示例：https://github.com/Authing/Guard/blob/master/examples/guard/normal/callback.html
// 代码示例：https://github.com/Authing/Guard/tree/v5/examples/guard/normal/callback.html
// callback.html
const guard = new GuardFactory.Guard(guardOptions)

Expand Down Expand Up @@ -572,7 +568,7 @@ async function handleAuthingLoginCallback () {
<link rel="stylesheet" href="https://cdn.authing.co/packages/guard/latest/guard.min.css" />
</head>
<body>
<!-- 代码示例：https://github.com/Authing/Guard/blob/master/examples/guard/normal/personal.html -->
<!-- 代码示例：https://github.com/Authing/Guard/tree/v5/examples/guard/normal/personal.html -->
<!-- personal.html -->
<button onclick="getUserInfo()">Get User Info</button>

Expand Down Expand Up @@ -600,11 +596,11 @@ async function handleAuthingLoginCallback () {

```tsx
// React 16 / 17
// 代码示例：https://github.com/Authing/Guard/blob/master/examples/guard-react/normal/src/pages/Embed.tsx
// 代码示例：https://github.com/Authing/Guard/tree/v5/examples/guard-react/normal/src/pages/Embed.tsx
import { useGuard, User } from "@authing/guard-react";

// React 18
// 代码示例：https://github.com/Authing/Guard/blob/master/examples/guard-react18/normal/src/pages/Embed.tsx
// 代码示例：https://github.com/Authing/Guard/tree/v5/examples/guard-react18/normal/src/pages/Embed.tsx
// import { useGuard, User } from "@authing/guard-react18";

import React, { useEffect } from "react";
Expand Down Expand Up @@ -634,7 +630,7 @@ export default function Login() {

```vue
<template>
<!-- 代码示例：https://github.com/Authing/Guard/blob/master/examples/guard-vue2/normal/src/views/Embed.vue -->
<!-- 代码示例：https://github.com/Authing/Guard/tree/v5/examples/guard-vue2/normal/src/views/Embed.vue -->
<div id="authing-guard-container"></div>
</template>
<script>
Expand All @@ -655,7 +651,7 @@ export default {

```vue
<template>
<!-- 代码示例：https://github.com/Authing/Guard/blob/master/examples/guard-vue3/normal/src/views/Embed.vue -->
<!-- 代码示例：https://github.com/Authing/Guard/tree/v5/examples/guard-vue3/normal/src/views/Embed.vue -->
<div id="authing-guard-container"></div>
</template>
Expand All @@ -680,7 +676,7 @@ onMounted(() => {
::: tab Angular

```typescript
// 代码示例：https://github.com/Authing/Guard/blob/master/examples/guard-angular/normal/src/app/pages/embed/embed.component.ts
// 代码示例：https://github.com/Authing/Guard/tree/v5/examples/guard-angular/normal/src/app/pages/embed/embed.component.ts
import { Component } from "@angular/core";
import { GuardService, User } from "@authing/guard-angular";

Expand Down Expand Up @@ -750,12 +746,12 @@ guard.start("#authing-guard-container").then((userInfo) => {
// App.tsx

// React 16 / 17
// 代码示例：https://github.com/Authing/Guard/blob/master/examples/guard-react/modal/src/App.tsx
// 代码示例：https://github.com/Authing/Guard/tree/v5/examples/guard-react/modal/src/App.tsx
import { GuardProvider } from "@authing/guard-react";
import "@authing/guard-react/dist/esm/guard.min.css";

// React 18
// 代码示例：https://github.com/Authing/Guard/blob/master/examples/guard-react18/modal/src/App.tsx
// 代码示例：https://github.com/Authing/Guard/tree/v5/examples/guard-react18/modal/src/App.tsx
// import { GuardProvider } from "@authing/guard-react18";
// import "@authing/guard-react18/dist/esm/guard.min.css";

Expand Down Expand Up @@ -784,11 +780,11 @@ function App() {
// Embed.tsx

// React 16 / 17
// 代码示例：https://github.com/Authing/Guard/blob/master/examples/guard-react/modal/src/pages/Embed.tsx
// 代码示例：https://github.com/Authing/Guard/tree/v5/examples/guard-react/modal/src/pages/Embed.tsx
import { useGuard, User } from "@authing/guard-react";

// React 18
// 代码示例：https://github.com/Authing/Guard/blob/master/examples/guard-react18/modal/src/pages/Embed.tsx
// 代码示例：https://github.com/Authing/Guard/tree/v5/examples/guard-react18/modal/src/pages/Embed.tsx
// import { useGuard, User } from "@authing/guard-react18";

export default function Embed() {
Expand Down Expand Up @@ -829,7 +825,7 @@ export default function Embed() {
::: tab Vue2

```javascript
// 代码示例：https://github.com/Authing/Guard/blob/master/examples/guard-vue2/modal/src/main.js
// 代码示例：https://github.com/Authing/Guard/tree/v5/examples/guard-vue2/modal/src/main.js
// main.js
import Vue from "vue";
import { GuardPlugin } from "@authing/guard-vue2";
Expand All @@ -849,7 +845,7 @@ Vue.use(GuardPlugin, {

```html
<template>
<!-- 代码示例：https://github.com/Authing/Guard/blob/master/examples/guard-vue2/modal/src/views/Embed.vue -->
<!-- 代码示例：https://github.com/Authing/Guard/tree/v5/examples/guard-vue2/modal/src/views/Embed.vue -->
<!-- Embed.vue -->
<div class="embed-container">
<button class="authing-button" @click="showGuard">Show Guard</button>
Expand Down Expand Up @@ -889,7 +885,7 @@ Vue.use(GuardPlugin, {
::: tab Vue3

```javascript
// 代码示例：https://github.com/Authing/Guard/blob/master/examples/guard-vue3/modal/src/main.ts
// 代码示例：https://github.com/Authing/Guard/tree/v5/examples/guard-vue3/modal/src/main.ts
// main.ts
import { createApp } from "vue";
import App from "./App.vue";
Expand All @@ -914,7 +910,7 @@ app.use(

```html
<template>
<!-- 代码示例：https://github.com/Authing/Guard/blob/master/examples/guard-vue3/modal/src/views/Embed.vue -->
<!-- 代码示例：https://github.com/Authing/Guard/tree/v5/examples/guard-vue3/modal/src/views/Embed.vue -->
<!-- Embed.vue -->
<div class="embed-container">
<button class="authing-button" @click="showGuard">Show Guard</button>
Expand Down Expand Up @@ -955,7 +951,7 @@ app.use(
::: tab Angular

```typescript
// 代码示例：https://github.com/Authing/Guard/blob/master/examples/guard-angular/modal/src/app/app.module.ts
// 代码示例：https://github.com/Authing/Guard/tree/v5/examples/guard-angular/modal/src/app/app.module.ts
// app.module.ts
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
Expand Down Expand Up @@ -985,7 +981,7 @@ export class AppModule {}
```

```typescript
// 代码示例：https://github.com/Authing/Guard/blob/master/examples/guard-angular/modal/src/app/pages/embed/embed.component.ts
// 代码示例：https://github.com/Authing/Guard/tree/v5/examples/guard-angular/modal/src/app/pages/embed/embed.component.ts
// embed.component.ts
import { Component } from "@angular/core";

Expand Down Expand Up @@ -1022,7 +1018,7 @@ export class EmbedComponent {
::: tab CDN

```html
<!-- 代码示例：https://github.com/Authing/Guard/blob/master/examples/guard/modal/embed.html -->
<!-- 代码示例：https://github.com/Authing/Guard/tree/v5/examples/guard/modal/embed.html -->
<button onclick="showGuard()">Show Guard</button>

<div>
Expand Down
2 changes: 1 addition & 1 deletion docs/guide/quick-start.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -253,7 +253,7 @@ onMounted(() => {
```

```typescript
// 代码示例：https://github.com/Authing/Guard/blob/v5/examples/guard-angular/normal/src/app/pages/embed/embed.component.ts
// 代码示例：https://github.com/Authing/Guard/tree/v5/examples/guard-angular/normal/src/app/pages/embed/embed.component.ts
import { Component } from '@angular/core'

import { GuardService, User } from '@authing/guard-angular'
Expand Down

0 comments on commit e32a222

Please sign in to comment.