使用vue, pinia, supabase从google auth获取电子邮件

Question

希望使用supabase将Google认证添加到我的vue应用程序中。我怎么能从那里插入用户的电子邮件谷歌帐户到我的用户表一旦他们注册?我用电子邮件注册的代码如下:

const handleSignup = async (credentials) => {
const { email, password, name } = credentials;
if(password.length < 6){
console.log("password way too short")
return errorMessageSignUp.value = "Password length is too short"
}
if(!validateEmail(email)){
return errorMessageSignUp.value = "Email is invalid"
}
loading.value = true
const {error} = await supabase.auth.signUp({
email,
password,
})
if(error){
loading.value = false
return errorMessageSignUp.value = error.message
}
await supabase.from("users").insert({
email,
name
})
const { data: newUser } = await supabase
.from("users")
.select()
.eq('email', email)
.single()
user.value = {
email: newUser.email,
name: newUser.name
}

loading.value = false
}

由于上面的代码接受电子邮件和密码字段并将其插入到users表中，所以我想在用户使用Google auth注册时做同样的事情。

const signInWithGoogle = async () => {
await supabase.auth.signInWithOAuth({
provider: 'google',
})
}
// not sure on how to get email from google sign in/sign up

Answer 1

不要在前端复制电子邮件地址，如果在注册后网络丢失可能会失败，您可以在用户注册时使用数据库触发器在后台复制数据。这更具容错性，是在Supabase中实现这些特性的推荐方法。

-- inserts a row into public.users
create function public.handle_new_user()
returns trigger
language plpgsql
security definer set search_path = public
as $$
begin
insert into public.profiles (id, email)
values (new.id, new.email);
return new;
end;
$$;
-- trigger the function every time a user is created
create trigger on_auth_user_created
after insert on auth.users
for each row execute procedure public.handle_new_user();

你可以在这里阅读更多的官方指南。