Edited at

ASP.NET MVC で LINE Login を使う


概要

この記事では LINE Loing を ASP.NET MVC に組み込む方法を解説します。


※課題

LINE Login の場合、初期状態では Email を取得できません。別途「メール取得権限の申請」を行う必要があります。

今回のライブラリでは Email が取得できない場合、MID に @line.com を付けて返すようにしています。

参考: LINE Loginを利用したWebアプリを ASP.NET Core + OpenID Connectで実装する(その2:メールアドレスを取得する)


必要なスキルとリソース


  • C# と ASP.NET MVC の基本的な知識

  • Visual Studio 2017

  • LINE 開発者ポータルへのアクセス


LINE Login


サポートされる認証とフロー

ウェブアプリにLINEログインを組み込む にあるように、LINE Login は Web 業界標準である OAuth 2.0 と OpenID Connect をサポートしています。よってその他多くのソーシャルログインと同じ感覚で使えます。

[ログインフロー]

login


チャネルの作成

LINE Login を使うためには、まずチャネルを作成する必要があります。チャネルを設定する を参照してチャネルを作成してください。作成したチャネルの ChannelId と ChannelSecret は後ほど使います。


ASP.NET MVC アプリケーションの開発

1. Visual Studio を開き、「ASP.NET Web アプリケーション (.NET Framework)」を選択し、作成。

image.png

2. 「認証の変更」をクリック。

image.png

3. 「個別のユーザーアカウント」を選択して「OK」をクリック。

image.png

4. ソリューションの準備が完了した時点で、NuGet の管理より「Owin.Security.Middleware.Line」を追加。

image.png

5. Web.Config に以下の項目を追加。ChannelId と ChannelSecret は作成した LINE Login チャネルより取得。

    <add key="RedirectUri" value="http://localhost:62686/line-signin" />

<add key="ChannelSecret" value="" />
<add key="ChannelId" value="" />

6. App_Start\Startup.Auth.cs に using を追加。


App_Start\Startup.Auth.cs

using Owin.Security.Middleware.Line;

using Line.Login.Models;
using System.Configuration;

7. ConfigureAuth メソッド内に、以下コードを追加。


App_Start\Startup.Auth.cs-ConfigureAuthメソッド

app.UseLineAuthentication(new LineAuthenticationOptions(

channelId: ConfigurationManager.AppSettings["ChannelId"],
channelSecret: ConfigurationManager.AppSettings["ChannelSecret"],
redirectUri: ConfigurationManager.AppSettings["RedirectUri"],
scope: Scope.OpenId | Scope.Profile
));

8. LINE 開発者コンソール より、作成した LINE Login チャネルの Callback URL を登録。

image.png


 テスト

1. F5 キーを押下してデバッグ実行。

2. 画面右上に「ログイン」をクリック。

image.png

3.「Line」をクリック。

image.png

4. LINE でログインを実行。

5. 初めての場合はユーザーを登録。必要に応じてメールアドレスを変更。

image.png


参照

LINE Loginを利用したWebアプリを ASP.NET Core + OpenID Connectで実装する(その2:メールアドレスを取得する)

GitHub: line-login-sdk-csharp