Blazorで使えるLIFF（LINE Front-end Framework）のC#ライブラリを作りました

はじめに

「技術書典７」で頒布された LINE API HANDBOOK の第３章を「Blazor とAzure Functions で作る LIFFアプリケーション」というタイトルで書きました。

booth.pm

その際に、JavaScriptで書かれたLIFFのSDKをBlazor（client-side）用にC#でラップしたクラスライブラリ「liff-client-csharp」を作ったので紹介します。 github.com

LIFFについて
LIFF はLINEアプリ上で動作するWebアプリケーションのフレームワークです。詳しくは以下を参照してください。
developers.line.biz

liff-client-csharp

「liff-client-csharp」では、LIFFのクライアントAPIのうち以下の機能をサポートしています。
また、ようやくpreviewが外れた.Net Core 3.0.100 に対応しています。

liff.init() LIFFアプリを初期化します。このメソッドを実行すると、LIFF SDKの他のメソッドを実行できるようになります。
liff.openWindow() 指定したURLをLINE内ブラウザまたは外部ブラウザで開きます。
liff.getAccessToken() 現在のユーザーのアクセストークンを取得します。
liff.getProfile() 現在のユーザーのプロフィールを取得します。
liff.sendMessages() ユーザーの代わりに、LIFFアプリが開かれているトーク画面にメッセージを送信します。
liff.closeWindow() LIFFアプリを閉じます。

（参考）LIFF APIリファレンス

※　LIFFのAPIには、LINE Things がらみのデバイス操作用のAPIも用意されているのですが、本ライブラリでは未対応となっています。

使用方法

1. NuGetでライブラリ LineDC.Liff を取得し、Blazor client-side（WebAssembly）のプロジェクトに追加

Install-Package LineDC.Liff -Version 0.6.0-preview

2. wwwroot/index.html のBody内にスクリプトの参照を追加

<body>
  ...

  <script src="https://d.line-scdn.net/liff/1.0/sdk.js"></script>
  <script src="_content/LineDC.Liff/liffInterop.js"></script>
</body>

3. Startup.cs のConfigureServicesでILiffClientを登録

public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddSingleton<ILiffClient, LiffClient>();
    }
}

4. 使用するページでILiffClientを使用する

各ページでは、@Injectディレクティブを用いることで ILiffClientの機能が利用可能となります。

@inject ILiffClient Liff

public interface ILiffClient
{
    bool Initialized { get; }
    LiffData Data { get; }
    Profile Profile { get; }
    string AccessToken { get; }

    Task InitializeAsync(IJSRuntime jSRuntime);
    Task LoadProfileAsync();
    Task<string> GetAccessTokenAsync();
    Task SendMessagesAsync(object messages);
    Task CloseWindowAsync();
    Task OpenWindowAsync(string url, bool external);
    void Reset();
}

以下のコードは、ページ初期化時のイベント（OnInitializedAsync）でLIFFの初期化と、ユーザープロフィールの取得を行い、取得した情報をページ内に表示する例です。

@page "/"
@inject ILiffClient Liff
@inject IJSRuntime JSRuntime

<div class="card" style="width: 20rem;">
    <img class="card-img" src="@Liff.Profile?.PictureUrl" alt="Loading image..." />
    <div class="card-body">
        <h5 class="card-title">@Liff.Profile?.DisplayName</h5>
        <p class="card-text">@Liff.Profile?.StatusMessage</p>
    </div>
    <ul class="list-group">
        <li class="list-group-item">Language: @Liff.Data?.Language</li>
        <li class="list-group-item">Type: @Liff.Data?.Context.Type</li>
        <li class="list-group-item">ViewType: @Liff.Data?.Context.ViewType</li>
        <li class="list-group-item">UserId: @Liff.Data?.Context.UserId</li>
        @if (@Liff.Data?.Context.Type == ContextType.Utou)
        {
        <li class="list-group-item">UtouId: @Liff.Data?.Context.UtouId</li>
        }
        else if (@Liff.Data?.Context.Type == ContextType.Room)
        {
        <li class="list-group-item">RoomId: @Liff.Data?.Context.RoomId</li>
        }
        else if (@Liff.Data?.Context.Type == ContextType.Group)
        {
        <li class="list-group-item">GroupId: @Liff.Data?.Context.GroupId</li>
        }
    </ul>
</div>

@code{

    protected override async Task OnInitializedAsync()
    {
        try
        {
            await Liff.InitializeAsync(JSRuntime);
            await Liff.LoadProfileAsync();
            StateHasChanged();
        }
        catch (Exception e)
        {
            await JSRuntime.InvokeAsync<object>("alert", e.ToString());
        }
    }
}