添加登录按钮

React
Vue2.0
Vue3.0

您希望在页面上，提供一个按钮来让用户登录。当用户单击此按钮时，他们将被重定向到XAuth的托管的登录页面，以便进行身份验证。

React

import XAuth from '@XAuth/sdk-core'
import { Security, LoginCallback, SecurityRoute } from '@XAuth/sdk-react'
import { BrowserRouter, Route, Link } from 'react-router-dom'
function App() {
  const XAuth = new XAuth({
    issuer: `kang.xauth.cloud/oauth/v1`,
    clientId: `2YXXZ78611K0c8906MX6RJ8c0s84VcQB`,
    redirectUri: `http://localhost:3000/callback`,
    scopes: ['openid', 'profile', 'email'],
  })
  //添加一个登录按钮
  const login = () => XAuth.login()
  return (
    <>
      <button onClick={login}>Login</button>
    </>
  )
}

export default App

Vue2.0

在页面中添加一个按钮，并对其调用

this.$XAuth.login();

<template>
  <button @click="login">login</button>
</template>
<script lang="ts">
  import { Component, Vue } from "vue-property-decorator";
  @Component({
    components: {},
  })
  export default class App extends Vue {
    private login() {
      this.$XAuth.login();
    }
  }
</script>

Vue3.0

在页面中添加一个按钮，并对其调用

this.$XAuth.login();

<template>
  <button @click="login">login</button>
</template>
<script lang="ts">
  import { defineComponent } from "vue";

  export default defineComponent({
    name: "App",

    methods: {
      login() {
        this.$XAuth.login();
      },
    },
  });
</script>