[Vue] 13 - Amplify: user authentication

Amazon Cognito

一、Cognito 标签

# 可能先需要 amplify init 
$ amplify add auth

--> Default configuration

--> Email

 

$ amplify push

 

• 安装库、包 

$ sudo npm install aws-amplify aws-amplify-vue
$ sudo npm install -g @aws-amplify/cli

node 12可能会导致安装失败，请尝试node 10稳定版本为宜。

在Ubuntu 18.04系统中安装Node.js 10的方法

1、要在Ubuntu 18.04/Ubuntu 16.04/Debian 9中安装Node.js 10.x LTS，请添加NodeSource二进制分发存储库：

curl -sL https://deb.nodesource.com/setup_10.x | sudo bash

此命令将Node.js APT存储库配置到你的操作系统。

2、添加存储库后，使用apt包管理器在Ubuntu 18.04/Ubuntu 16.04/Debian 9中安装Node.js 10 LTS： 

sudo apt update
sudo apt -y install gcc g++ make
sudo apt -y install nodejs

总结，AWS提供了 “标签”，直接使用即可，有界面有功能。

 

二、示范例子

代码：https://github.com/ErikCH/Aws-auth-example

视频：Learn Vue.js With Authentication Using Custom AWS Login Pages

$ amplify init
$ amplify add auth
$ amplify push

 

• 目录结构

 

 

• HelloWorld.vue

这里自定义了输入框的UI。

<template>
  <div class="hello">
    <div v-if="!signedIn">
      <!-- <amplify-authenticator></amplify-authenticator> -->
      <input v-model="login"    type="text"     name="" placeholder="Login" ><br>
      <input v-model="password" type="password" name="" placeholder="Password" ><br>
      <button @click="signIn">Sign in</button>
    </div>
    <div v-if="signedIn">
      <!-- <amplify-sign-out></amplify-sign-out> -->
      <button @click="signOut">Sign Out</button>
    </div>

  </div>
</template>


<script>
import { Auth } from 'aws-amplify'
import { AmplifyEventBus } from 'aws-amplify-vue';

export default {
  name: 'HelloWorld',
  data() {
    return {
      login: '',
      password: ''
      // signedIn: false
    }
  },
  props: {
    msg: String,
  },
  created(){
    this.findUser();

    AmplifyEventBus.$on('authState', info => {
      if(info === "signedIn") {
        this.findUser();
      } else {
        this.$store.state.signedIn = false;
        // this.signedIn = false;
        this.$store.state.user = null;
      }
    });
  },
  computed: {
    signedIn(){
      return this.$store.state.signedIn;
    }
  },
  methods: {
    signIn(){
      Auth.signIn(this.login, this.password)
        .then(user =>{
            this.$store.state.signedIn = !!user;
            this.$store.state.user = user;
        } )
        .catch(err => console.log(err));
    },
    signOut() {
      Auth.signOut()
        .then(data =>{
          this.$store.state.signedIn = !!data;
        } )
        .catch(err => console.log(err));
    },
    async findUser() {
      try {
        const user = await Auth.currentAuthenticatedUser();
        // this.signedIn = true;
        this.$store.state.signedIn = true;
        this.$store.state.user = user;
        console.log(user);

      } catch(err) {
        // this.signedIn = false;
        this.$store.state.signedIn = false;
        this.$store.state.user = null;
      }
    }
  }
}
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">... ...
</style>

 

• “注册” 页面设计

两步走：(1) 注册，申请confirmation code （2）验证 code。

<template>
<div>
<div v-if="!user">
    <h1>Sign Up</h1>
    <input v-model="login"    type="text"     placeholder="Login"><br> 
    <input v-model="password" type="password" placeholder="Password"> <br>
    <input v-model="email"    type="email"    placeholder="Email"><br> 
    <button @click="submit">Submit</button>

</div>
<div v-if="user">
<h2>Confirm Sign Up</h2>
<input v-model="code" type="text" placeholder="Code"><br> 
<button @click="confirm">Submit</button>

</div>
</div>
</template>


<script>
import { Auth } from 'aws-amplify';
export default {
    data(){
        return {
            login: '',
            email: '',
            password: '',
            code: '',
            user: ''
        }
    },
    methods: {
        confirm() {
            // After retrieveing the confirmation code from the user
            Auth.confirmSignUp(this.login, this.code, {
                // Optional. Force user confirmation irrespective of existing alias. By default set to True.
                forceAliasCreation: true
            }).then(data => this.$router.push("/"))
              .catch(err => console.log(err));
        },
        submit(){
            Auth.signUp({
                username: this.login,
                password: this.password,
                attributes: {
                    email: this.email
                },
                validationData: [],  // optional
                })
                .then(data => this.user = data.user)
                .catch(err => console.log(err));
        }
    }
    
}
</script>

<style>
input {
    margin: 10px;
    padding: 16px;
}
</style>