带你走一遍云开发（三）：实现二手市场登录页

完成一个二手市场前端静态网页，这一步不涉及云开发，样式部分大家可以自行完成大致如下，每个页面都会提供该页面的代码可直接贴为html文件使用。

image.png

功能1：登录页面（使用云开发提供的匿名登录与邮件登录）

样式部分，可以照抄，TODO的部分是云开发部分

    
    
    
    
    
    
    



    

        
            
                
                    
                         商品列表
                    
                    
                        发布商品
                    
                    
                        登录
                    
                
            
            
                
                    
                        
                    
                    
                        
                    
                
                注册
                登录
                使用游客身份登录
            
        
    

业务逻辑部分

• 实现匿名登录

1. 进入云开发控制台：console.cloud.tencent.com/tcb,在左边的菜单栏选择【登录授权】，并打开匿名登录

   匿名登录开启后允许游客身份访问云环境，邮件登录开启后得用邮箱登录后才可以访问云环境

2. 在login.html中引入云开发web sdk端的JS文件：

3. 代码部分（环境id注意填写为自己的环境id）

• mounted生命周期，检测是否登陆

async mounted() {
    const app = this.app = cloudbase.init({
        env: "xxxxxx"  //填入自己的ID
    });

    const loginState = app.auth().hasLoginState();
    console.log(app.auth())
    if (loginState) {
        // 登录态有效
        this.$message('已登录，欢迎您' + app.auth().currentUser.uid)
    } else {
        // 没有登录态，或者登录态已经失效
        this.$message({
            type: 'warning',
            message: '尚未登录'
        })
    }
},

• anonymousLogin函数

async anonymousLogin() {
    this.app
        .auth({
            persistence: "local"
        })
        .anonymousAuthProvider()
        .signIn()
        .then(() => {
            // 登录成功
            this.$message('匿名登录成功')
        })
        .catch((err) => {
            // 登录失败
            console.log(err);
        });
},

4. 将该文件上传至静态网站托管

   
   
   image.png

5. 访问网址，如果我们可以正确显示未登录，并且在点击了【游客匿名登录】后，刷新页面可以弹出已登录，说明我们的这部分操作已经成功了。

• 实现邮件登录

1. 获取邮箱授权码
   打开QQ邮箱，去QQ邮箱的设置页面开启SMTP服务，并获取邮箱授权码

QQ邮箱-设置-账户-打开SMTP服务

1. 在云开发控制台【登录授权】打开【邮箱登录】，同是在点击右边的配置邮箱，
   点击上面图片最下面的【生成授权码】，将得到的授权码保存，回到，登陆授权页面

• 配置发信人

  
  
  云开发控制台-登录授权
  
  
  SMTP设置

如果配置成功，系统会给配置邮箱发送一封邮件

• 配置应用

  
  
  这里都是随意配置，链接需要完整的（带协议）

2. 配置完成后即可使用邮件登录SDK接入，参考代码如下（同样需要引入JSSDK）

3. 实现 mailLogin 与 mailSignUp 函数

//用this获取表单内输入框值并注册
mailSignUp(){
  this.app
    .auth()
    .signUpWithEmailAndPassword(this.form.email,this.form.password)
    .then(() => {
      // 发送验证邮件成功
      this.$message({
           type:'success',
           message:'发送注册验证邮件成功'
      })
    }).catch(err=>{
        this.$message({
           type:'error',
           message:'发送注册验证邮件失败' + err
      })
    });
 }
//用this获取表单内输入框值并登录
mailLogin(){
  this.app
  .auth()
  .signInWithEmailAndPassword(this.form.email,this.form.password)
  .then((loginState) => {
    this.$message({
         type:'success',
         message:'邮箱登录成功'
    })
  }).catch(err=>{
      this.$message({
         type:'error',
         message:'邮箱登录失败' + err
    })
  });;
}

3. 写完新的页面后，上传到静态网站托管覆盖原有页面，注册并登录看看。

4. 如果正确，将会收到注册的邮件，注册成功后即可使用邮箱登录，登陆成功可使用云开发功能，在【用户管理】中也可以看到新注册的用户。
   <这里放截图>

知识点1 ：需要在控制台打开对应的登录模式后，才可使用对应的方法

知识点2 ：需要将部署的域名配置在【安全配置】中，否则会跨域。本案例中由于静态网站托管域名默认已配置在【安全配置】，因此无需额外操作。平时测试使用的localhost或是自己服务器的域名，需要另外添加。

知识点3：使用邮箱登录需要到对应的邮箱设置中，打开SMTP服务并配置应用才可正常发送注册邮件

知识点4：登录成功后可以在【用户管理】看到对应的用户