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で実装する（その２：メールアドレスを取得する）](http://pierre3.hatenablog.com/entry/2018/04/01/090850)

# 必要なスキルとリソース

- C# と ASP.NET MVC の基本的な知識
- Visual Studio 2017
- LINE 開発者ポータルへのアクセス

# LINE Login

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

[ウェブアプリにLINEログインを組み込む](https://developers.line.me/ja/docs/line-login/web/integrate-line-login/) にあるように、LINE Login は Web 業界標準である OAuth 2.0 と OpenID Connect をサポートしています。よってその他多くのソーシャルログインと同じ感覚で使えます。

[ログインフロー]
![login](https://developers.line.me/media/line-login/integrate-login-web/login-flow-web-0bc4c99d.png)

## チャネルの作成

LINE Login を使うためには、まずチャネルを作成する必要があります。[チャネルを設定する](https://developers.line.me/ja/docs/line-login/web/integrate-line-login/#spy-anchor-2137da457ae86b775b1e0d667e383c0d4fada72d) を参照してチャネルを作成してください。作成したチャネルの ChannelId と ChannelSecret は後ほど使います。

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

1\. Visual Studio を開き、「ASP.NET Web アプリケーション (.NET Framework)」を選択し、作成。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214116/c8e8b804-885e-9a1b-0f03-b685859d6daf.png)

2\. 「認証の変更」をクリック。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214116/b77d78d9-15b1-bfd5-f556-ea28d19675f0.png)

3\. 「個別のユーザーアカウント」を選択して「OK」をクリック。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214116/3bae5a45-b0bf-d53f-d71b-8cd85ec398c5.png)

4\. ソリューションの準備が完了した時点で、NuGet の管理より「Owin.Security.Middleware.Line」を追加。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214116/57ff1b69-df22-00c8-e846-cc6f4bc7a3cf.png)

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

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

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

```csharp:App_Start\Startup.Auth.cs
using Owin.Security.Middleware.Line;
using Line.Login.Models;
using System.Configuration;
```

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

```csharp: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 開発者コンソール](https://developers.line.me/console) より、作成した LINE Login チャネルの Callback URL を登録。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214116/7dfd0512-6abe-349d-3a08-d1a3437d1c80.png)

#　テスト

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

2\. 画面右上に「ログイン」をクリック。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214116/742206d2-012c-7326-22de-b372f0362145.png)

3\.「Line」をクリック。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214116/cc8bccef-641e-22f3-2fab-2f82cc2e7231.png)

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

5\. 初めての場合はユーザーを登録。必要に応じてメールアドレスを変更。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214116/352c4fe6-6f27-5898-75fd-d3cf0b2c1ba1.png)

# 参照

[LINE Loginを利用したWebアプリを ASP.NET Core + OpenID Connectで実装する（その２：メールアドレスを取得する）](http://pierre3.hatenablog.com/entry/2018/04/01/090850)
[GitHub: line-login-sdk-csharp](https://github.com/kenakamu/line-login-sdk-csharp)