我如何使用 Next.js 图像作为 onClick 表单提交给谷歌 Oauth？

Question

免责声明：菜鸟/初学者

我有一个工作 email 和社交下一个身份验证自定义登录页面并运行。

现在我想给它设置不同的样式，这样我就可以使用 next.js /Image 来拥有一个可点击的图标/img，它将执行与当前按钮相同的提交操作。

这是我功能齐全的登录页面...

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 },
  }
}

/Image 代码看起来像这样......

<a>
    <Image 
        priority="true"
        src="/google_login.png"
        alt="Google Login"
        width="200px"
        height="200px"
        layout="intrinsic"
     />
</a>

更新：

我以前使用过 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>
    )
   })}

这两种方法都有效。 但是我该如何切换图像的按钮呢？

任何和所有的想法将不胜感激。

提前致谢

Answer 1

这是我对这个问题的解决方案......

“/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 },
  };
}

这是 googleLogin 组件的示例（twitter 和 facebook 是相同的方法）...

“/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>
  );
}

现在，当单击提供商徽标时，它们会正确重定向到提供商 Oauth。

Answer 2

我的方法是这样的：

{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>
    )
   })}