概述
Auth Api 提供了一套完整的认证相关功能,支持多种登录方式、用户管理和会话管理。Auth Api 按照功能用途分为 7 个类别。每个类别包含相关的 API 方法,方便开发者根据具体需求快速找到合适的接口。
提示
v3 版本在调用身份认证相关 API 时,使用的是 身份认证 HTTP API 的开放能力。
- 认证登录:用户注册和登录相关的 API 方法,支持多种登录方式。
- 会话管理:管理用户会话状态和令牌的 API 方法。
- 用户管理:获取、更新和管理用户信息的 API 方法。
- 身份源管理:管理第三方身份源绑定和解绑的 API 方法。
- 密码管理:密码重置和修改相关的 API 方法。
- 验证管理:验证码发送、验证和重发相关的 API 方法。
- 其他工具:其他辅助功能的 API 方法。
基础使用示例
- 初始化配置
- 登录状态检查
- 用户注册流程
- 用户登出
- 密码登录
- 认证状态监听
- 手机验证码登录
Publishable Key 可前往 云开发平台/API Key 配置 中生成
auth.detectSessionInUrl 为初始化可选参数,设置后可以自动检测 URL 中的 OAuth 参数(code、state),适用于signInWithOAuth、linkIdentity等使用场景
import cloudbase from "@cloudbase/js-sdk";
// 初始化
const app = cloudbase.init({
env: "your-env-id", // 替换为您的环境ID
region: "ap-shanghai", // 地域,默认为上海
accessKey: "", // 填入生成的 Publishable Key,
auth: {
detectSessionInUrl: true, // 可选:自动检测 URL 中的 OAuth 参数,适用于signInWithOAuth、linkIdentity
},
});
const auth = app.auth;
// 检查登录状态
async function checkAuthStatus() {
const { data, error } = await auth.getSession();
if (error) {
console.error("检查登录状态失败:", error.message);
return false;
}
if (data.session) {
console.log("用户已登录:", data.session.user);
return true;
} else {
console.log("用户未登录");
return false;
}
}
// 用户注册示例(四步验证流程)
async function registerUser(email, password, verificationCode) {
// 第一步:发送验证码
const { data, error } = await auth.signUp({
email: email,
password: password,
});
if (error) {
console.error("发送验证码失败:", error.message);
return false;
} else {
console.log("验证码已发送,等待验证...");
// 第二步:验证验证码并完成注册
const { data: loginData, error: loginError } = await data.verifyOtp({
token: verificationCode,
});
if (loginError) {
console.error("验证失败:", loginError.message);
return false;
} else {
console.log("注册成功:", loginData.user?.email);
return true;
}
}
}
// 用户登出示例
async function logoutUser() {
const { data, error } = await auth.signOut();
if (error) {
console.error("登出失败:", error.message);
return false;
} else {
console.log("登出成功,会话已清除");
return true;
}
}
// 密码登录示例
async function loginWithPassword(email, password) {
const { data, error } = await auth.signInWithPassword({
email: email,
password: password,
});
if (error) {
console.error("登录失败:", error.message);
return false;
} else {
console.log("登录成功:", data.user?.email);
return true;
}
}
// 监听认证状态变化
auth.onAuthStateChange((event, session, info) => {
console.log("认证状态变化:", event);
switch (event) {
case "INITIAL_SESSION":
console.log("初始会话已建立");
if (session) {
console.log("用户已登录:", session.user);
} else {
console.log("用户未登录");
}
break;
case "SIGNED_IN":
console.log("用户登录成功:", session.user);
break;
case "SIGNED_OUT":
console.log("用户已登出");
break;
case "PASSWORD_RECOVERY":
console.log("密码已重置");
break;
case "TOKEN_REFRESHED":
console.log("令牌已刷新");
break;
case "USER_UPDATED":
console.log("用户信息已更新");
break;
case "BIND_IDENTITY":
console.log("身份源绑定结果");
break;
}
});
// 完整的手机验证码登录页面实现
class PhoneLoginPage {
constructor() {
this.setupEventListeners();
}
// 设置事件监听
setupEventListeners() {
document.getElementById("sendCodeBtn").addEventListener("click", (e) => {
e.preventDefault();
this.sendVerificationCode();
});
document.getElementById("verifyCodeBtn").addEventListener("click", (e) => {
e.preventDefault();
this.verifyCodeAndLogin();
});
}
// 发送验证码
async sendVerificationCode() {
const phone = document.getElementById("phone").value;
if (!phone) {
alert("请输入手机号码");
return;
}
// 验证手机号格式
if (!this.validatePhone(phone)) {
alert("请输入正确的手机号码格式");
return;
}
// 显示加载状态
this.showLoading(true);
this.hideError();
try {
const { data, error } = await auth.signInWithOtp({
phone: phone,
});
if (error) {
this.handleSendCodeError(error);
} else {
this.handleSendCodeSuccess(data);
}
} catch (error) {
this.handleNetworkError(error);
} finally {
this.showLoading(false);
}
}
// 验证验证码并登录
async verifyCodeAndLogin() {
const code = document.getElementById("code").value;
if (!code) {
alert("请输入验证码");
return;
}
if (!this.verifyFunction) {
alert("请先发送验证码");
return;
}
this.showLoading(true);
this.hideError();
try {
const { data, error } = await this.verifyFunction({ token: code });
if (error) {
this.handleVerifyError(error);
} else {
this.handleLoginSuccess(data);
}
} catch (error) {
this.handleNetworkError(error);
} finally {
this.showLoading(false);
}
}
// 手机号格式验证
validatePhone(phone) {
const phoneRegex = /^1[3-9]\d{9}$/;
return phoneRegex.test(phone);
}
// 处理发送验证码成功
handleSendCodeSuccess(data) {
this.verifyFunction = data.verifyOtp;
// 显示验证码输入区域
document.getElementById("verificationSection").style.display = "block";
document.getElementById("phoneSection").style.display = "none";
// 开始倒计时
this.startCountdown(60);
document.getElementById("success").innerText =
"验证码已发送到您的手机,请注意查收";
document.getElementById("success").style.display = "block";
}
// 处理发送验证码错误
handleSendCodeError(error) {
switch (error.code) {
case "invalid_argument":
document.getElementById("error").innerText =
"参数格式错误,请检查邮箱或手机号格式";
break;
case "user_not_found":
document.getElementById("error").innerText =
"该手机号未注册,请先注册或使用其他手机号";
break;
case "resource_exhausted":
document.getElementById("error").innerText = "发送频率过高,请稍后再试";
break;
case "unreachable":
document.getElementById("error").innerText =
"网络连接失败,请检查网络设置";
break;
default:
document.getElementById("error").innerText =
"发送验证码失败: " + error.message;
}
document.getElementById("error").style.display = "block";
}
// 处理验证错误
handleVerifyError(error) {
switch (error.code) {
case "invalid_code":
document.getElementById("error").innerText = "验证码错误,请重新输入";
break;
case "code_expired":
document.getElementById("error").innerText = "验证码已过期,请重新获取";
// 显示重新发送按钮
document.getElementById("resendBtn").style.display = "block";
break;
case "max_attempts_exceeded":
document.getElementById("error").innerText = "验证次数过多,请稍后重试";
break;
default:
document.getElementById("error").innerText =
"验证失败: " + error.message;
}
document.getElementById("error").style.display = "block";
}
// 处理登录成功
handleLoginSuccess(data) {
document.getElementById("success").innerText = "登录成功!欢迎回来";
document.getElementById("success").style.display = "block";
console.log("用户信息:", data.user);
console.log("会话信息:", data.session);
// 延迟跳转到首页
setTimeout(() => {
window.location.href = "/dashboard";
}, 2000);
}
// 处理网络错误
handleNetworkError(error) {
document.getElementById("error").innerText =
"网络错误,请检查网络连接后重试";
document.getElementById("error").style.display = "block";
console.error("网络错误:", error);
}
// 显示/隐藏加载状态
showLoading(show) {
document.getElementById("loading").style.display = show ? "block" : "none";
document.getElementById("sendCodeBtn").disabled = show;
document.getElementById("verifyCodeBtn").disabled = show;
}
// 隐藏错误信息
hideError() {
document.getElementById("error").style.display = "none";
}
// 开始倒计时
startCountdown(seconds) {
let countdown = seconds;
const btn = document.getElementById("resendBtn");
const originalText = btn.innerText;
btn.disabled = true;
const timer = setInterval(() => {
countdown--;
btn.innerText = `${countdown}秒后可重发`;
if (countdown <= 0) {
clearInterval(timer);
btn.disabled = false;
btn.innerText = originalText;
}
}, 1000);
}
}
// 页面加载完成后初始化
window.addEventListener("DOMContentLoaded", () => {
new PhoneLoginPage();
});
认证登录
signUp
async signUp(params: SignUpReq): Promise<SignUpRes>
注册新用户账户,采用智能注册并登录流程。
提示
手机号验证码注册 仅支持 上海 地域
messageId 必填差异成功后使用返回的 data.verifyOtp({ token }) 校验即可,不必传 messageId(与 signInWithOtp 返回的回调相同,SDK 已绑定)。独立调用 auth.verifyOtp 时 messageId 为必填。