social login 소셜로그인 #항목추가 #커스텀

# What?

소셜로그인 구현법

 

# How?

https://socialiteproviders.com/Apple/#installation-basic-usage

Socialite Providers

 

https://github.com/ShinHyungJune/social-login#readme

 

소셜로그인 커스텀해서 사용하는 방법

1. provider 생성

- ProviderInterface를 implemnts하기

- IDENTIFIER 수정

- mapUserToObject 메소드의 항목값 수정. 항목값은 각 소셜 api가 넘겨주는 항목값 참고

 

@ app/Providers/KakaoCustomProvider.php

<?php

namespace App\Providers;

use App\Events\PostCreated;
use Illuminate\Auth\Events\Registered;
use Illuminate\Auth\Listeners\SendEmailVerificationNotification;
use Illuminate\Foundation\Support\Providers\EventServiceProvider as ServiceProvider;
use Illuminate\Support\Arr;
use Illuminate\Support\Facades\Event;
use Laravel\Socialite\Two\ProviderInterface;
use SocialiteProviders\Kakao\KakaoProvider;
use SocialiteProviders\Manager\OAuth2\AbstractProvider;
use SocialiteProviders\Manager\OAuth2\User;
use SocialiteProviders\Naver\NaverExtendSocialite;

class KakaoCustomProvider extends AbstractProvider implements ProviderInterface
{
    /**
     * Unique Provider Identifier.
     */
    public const IDENTIFIER = 'KAKAO-CUSTOM';

    /**
     * Get the authentication URL for the provider.
     *
     * @param string $state
     *
     * @return string
     */
    protected function getAuthUrl($state)
    {
        return $this->buildAuthUrlFromBase('https://kauth.kakao.com/oauth/authorize', $state);
    }

    /**
     * Get the token URL for the provider.
     *
     * @return string
     */
    protected function getTokenUrl()
    {
        return 'https://kauth.kakao.com/oauth/token';
    }

    /**
     * Get the access token for the given code.
     *
     * @param string $code
     *
     * @return string
     */
    public function getAccessToken($code)
    {
        $response = $this->getHttpClient()->request('POST', $this->getTokenUrl(), [
            'form_params' => $this->getTokenFields($code),
        ]);

        $this->credentialsResponseBody = json_decode($response->getBody(), true);

        return $this->parseAccessToken($response->getBody());
    }

    /**
     * Get the POST fields for the token request.
     *
     * @param string $code
     *
     * @return array
     */
    protected function getTokenFields($code)
    {
        $array = [
            'grant_type'   => 'authorization_code',
            'client_id'    => $this->clientId,
            'redirect_uri' => $this->redirectUrl,
            'code'         => $code,
        ];

        if ($this->clientSecret) {
            $array['client_secret'] = $this->clientSecret;
        }

        return $array;
    }

    /**
     * Get the raw user for the given access token.
     *
     * @param string $token
     *
     * @return array
     */
    protected function getUserByToken($token)
    {
        $response = $this->getHttpClient()->request('POST', 'https://kapi.kakao.com/v2/user/me', [
            'headers' => ['Authorization' => 'Bearer '.$token],
        ]);

        return json_decode($response->getBody(), true);
    }

    protected function mapUserToObject(array $user)
    {
        $validEmail = Arr::get($user, 'kakao_account.is_email_valid');
        $verifiedEmail = Arr::get($user, 'kakao_account.is_email_verified');

        return (new User())->setRaw($user)->map([
            'id'        => $user['id'],
            'nickname'  => Arr::get($user, 'properties.nickname'),
            'name'      => Arr::get($user, 'kakao_account.name'),
            'phone'      => str_replace("-", "", str_replace("+82 ", "0", Arr::get($user, 'kakao_account.phone_number'))),
            'email'     => $validEmail && $verifiedEmail ? Arr::get($user, 'kakao_account.email') : null,
            'avatar'    => Arr::get($user, 'properties.profile_image'),
        ]);
    }
}

2. socialite에 만든 Provider 추가하기

- extend에 'kakaoCustom'으로 수정한거 꼭 확인. 쓰는 driver명을 저기다 쓰면 됨(ex. spotify, youtube)

@ AppServiceProvider.php

   public function boot()
    {
        $this->bootKakaoCustomSocialite();
    }


    private function bootKakaoCustomSocialite()
    {
        $socialite = $this->app->make('Laravel\Socialite\Contracts\Factory');
        $socialite->extend(
            'kakaoCustom',
            function ($app) use ($socialite) {
                $config = $app['config']['services.kakaoCustom'];
                return $socialite->buildProvider(KakaoCustomProvider::class, $config);
            }
        );
    }

3. 키값 추가하기

@ services.php

<?php

return [

   	....

    'kakaoCustom' => [
        'client_id' => env('KAKAO_CLIENT_ID', "3a2ebad6e6cbaecffbbed3651ac37495"),
        'client_secret' => env('KAKAO_CLIENT_SECRET'),
        'redirect' => env('KAKAO_REDIRECT_URI', "/shopping/login/kakaoCustom")
    ],

    ...
];

4. 로그인 driver명 바꾸기

@ Login.vue

<a href="/shopping/openLoginPop/kakaoCustom">
     <img src="/images/icon_kakao.svg" alt="">
</a>

 

5. 해당 소셜 개발자센터에서 redirect url의 driver명을 커스텀 driver명으로 변경하기