[英]How could i use a Next.js image as onClick form submit for google Oauth?
Disclaimer: Noob/Beginner免责声明:菜鸟/初学者
I have a working email and socials next auth custom signin page up and running.我有一个工作 email 和社交下一个身份验证自定义登录页面并运行。
Now I want to style it differently so that I can use next.js /Image to have a clickable icon/img that will action the same submit as the current button does.现在我想给它设置不同的样式,这样我就可以使用 next.js /Image 来拥有一个可点击的图标/img,它将执行与当前按钮相同的提交操作。
Here is my fully functioning signin page...这是我功能齐全的登录页面...
import React from 'react'
import {getProviders, signIn} from 'next-auth/react'
import { getCsrfToken } from "next-auth/react"
import styles from '../../styles/signin.module.css'
import Logo from '../../components/Logo'
export default function SignIn ({ csrfToken, providers }) {
return (
<div className={styles.content}>
<div className={styles.cardWrapper}>
<Logo className={styles.logo}/>
<div className={styles.cardContent}>
<form method="post" action="/api/auth/signin/email">
<input name="csrfToken" type="hidden" defaultValue={csrfToken} />
<input type="email" id="email" name="email" placeholder='Email..' />
<button className={styles.primaryBtn} type="submit">Sign in with Email</button>
</form>
<p className={styles.seperator}> Or </p>
<form method="post" action="/api/auth/signin/google">
<input name="csrfToken" type="hidden" defaultValue={csrfToken} />
<button className={styles.primaryBtn} type="submit">Sign in with Google</button>
</form>
</div>
</div>
</div>
)
}
export async function getServerSideProps(context) {
const csrfToken = await getCsrfToken(context)
const providers = await getProviders(context)
return {
props: { csrfToken, providers },
}
}
The /Image code would look something like this... /Image 代码看起来像这样......
<a>
<Image
priority="true"
src="/google_login.png"
alt="Google Login"
width="200px"
height="200px"
layout="intrinsic"
/>
</a>
UPDATE:更新:
I had previously used a.map method to add my providers with standard button submits as follows...我以前使用过 a.map 方法来添加我的供应商,标准按钮提交如下...
{Object.values(providers).map((provider) => {
console.log(providers)
if (provider.name === "Email") {
return
}
return (
<div key={provider.name}>
<button onClick={() => signIn(provider.id)}>
Sign in with {provider.name}
</button>
</div>
)
})}
Both of these methods work.这两种方法都有效。 But how do I switch out the button for an image instead?但是我该如何切换图像的按钮呢?
Any and all ideas would be appreciated.任何和所有的想法将不胜感激。
Thanks in advance提前致谢
Here is my solution to this problem...这是我对这个问题的解决方案......
"/pages/auth/signin.js" “/pages/auth/signin.js”
import React from "react";
import { getProviders, signIn } from "next-auth/react";
import { getCsrfToken } from "next-auth/react";
import styles from "../../styles/signin.module.css";
import Logo from "../../components/Logo";
import { GoogleLogin } from "../../components/GoogleLogin";
import { FacebookLogin } from "../../components/FacebookLogin";
import { TwitterLogin } from "../../components/TwitterLogin";
export default function SignIn({ csrfToken, providers }) {
console.log(providers.google.signinUrl);
return (
<div className={styles.content}>
<div className={styles.cardWrapper}>
<Logo className={styles.logo} />
<div className={styles.cardContent}>
<form method="post" action="/api/auth/signin/email">
<input name="csrfToken" type="hidden" defaultValue={csrfToken} />
<input type="email" id="email" name="email" placeholder="Email.." />
<button className={styles.primaryBtn} type="submit">
Sign in with Email
</button>
</form>
<p className={styles.seperator}> Or </p>
{Object.values(providers).map((provider) => {
if (provider.name === "Email") {
return;
}
if (provider.name === "Google") {
console.log(provider);
return <GoogleLogin data={provider} />;
}
{
if (provider.name === "Twitter") {
console.log(provider)
return (
<TwitterLogin key={provider.id}/>
)
}
if (provider.name === "Facebook") {
console.log(provider)
return (
<FacebookLogin key={provider.id}/>
)
}
}
})}
</div>
</div>
</div>
);
}
export async function getServerSideProps(context) {
const csrfToken = await getCsrfToken(context);
const providers = await getProviders(context);
return {
props: { csrfToken, providers },
};
}
here is an example of the googleLogin component (twitter and facebook are the same method)...这是 googleLogin 组件的示例(twitter 和 facebook 是相同的方法)...
"/components/GoogleLogin.js" “/components/GoogleLogin.js”
import Image from "next/image";
import React from "react";
import { signIn } from "next-auth/react";
import styles from "../styles/signin.module.css";
export function GoogleLogin({ data }) {
console.log(data);
return (
<a className={styles.googleLogin} onClick={() => signIn(data.id)}>
<Image
priority="true"
src="/google_login.png"
alt="Google login"
width="40px"
height="40px"
layout="intrinsic"
/>
</a>
);
}
Now when the provider logos are clicked they properly redirect to the providers Oauth.现在,当单击提供商徽标时,它们会正确重定向到提供商 Oauth。
My approach would be this:我的方法是这样的:
{Object.values(providers).map((provider) => {
console.log(providers)
if (provider.name === "Email") {
return
}
return (
<div key={provider.name}>
<button onClick={() => signIn(provider.id)}>
<Image
priority="true"
src={provider.src}
alt={provider.alt}
width="40px"
height="40px"
layout="intrinsic"
/>
</button>
</div>
)
})}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.