Link Search Menu Expand Document

添加登录按钮

  1. React
  2. Vue2.0
  3. Vue3.0

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

React

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

export default App

Vue2.0

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

this.$oneauth.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.$oneAuth.login();
    }
  }
</script>

Vue3.0

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

this.$oneauth.login();
<template>
  <button @click="login">login</button>
</template>
<script lang="ts">
  import { defineComponent } from "vue";

  export default defineComponent({
    name: "App",

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