Step3. User authentication

Shoplive uses user information for the following purposes:

• Displaying user names and messages in the chat feature

• Storing logs based on user IDs when pop-ups (announcements, banners, coupons, etc.) are clicked

• Storing logs based on user IDs when products are clicked or the Like button is pressed

• Storing other user activity logs based on user IDs
  

To integrate user information with the Shoplive Player, Shoplive provides  both simple authentication and secure authentication methods.

• Guest: Can be used without login (availability may be restricted by the service provider)

• Simple Authentication: Enables quick and easy user authentication

• Secure Authentication: Uses a security authentication token (JWT)

For more details, please refer to the Authentication Token Generation Guide.

Using a Guest Account

• You can run the Shoplive Player without any authentication.

• Guest users can also set a user name.

import 'package:flutter/material.dart';
import 'package:shoplive_player/shoplive_common.dart';
import 'package:shoplive_player/shoplive_player.dart';
class MainPage extends StatefulWidget {
  const MainPage({Key? key}) : super(key: key);
  @override
  State<MainPage> createState() => _MainPageState();
}
class _MainPageState extends State<MainPage> {
  late final ShopLiveCommon _shopLiveCommon = ShopLiveCommon();
  late final ShopLivePlayer _shopLivePlayer = ShopLivePlayer();
  @override
  void initState() {
    super.initState();
     // Initialize SDK
    _shopLiveCommon.setAccessKey(accessKey: "{AccessKey}");
  }
  void playWithGuest() {
     // Create a guest user
    var user = ShopLiveCommonUser(
      userId: "{USER_ID}",
      userName: "{USER_NAME}",
    );
     // Set user information
    _shopLiveCommon.setUser(
      accessKey: "{AccessKey}",
      user: user,
    );
    // Start the player
    _shopLivePlayer.play(
      data: ShopLivePlayerData(
        campaignKey: "{CampaignKey}",
      ),
    );
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Shoplive Guest Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: playWithGuest,
          child: const Text('Play as Guest'),
        ),
      ),
    );
  }
}

Chat

• If guest chat is not allowed, selecting the chat button will produce no response.

• If a guest nickname is not required, a random nickname will be assigned automatically.

• If a guest nickname is required, a nickname input popup will appear when the chat button is pressed.

  The user must set a nickname to join the chat.

• Admin User Guide

Simple Authentication: User Account Integration

• By setting a user ID and a logged-in user name, you can link your service’s user account with Shoplive.

• You can configure the following user information:

  • User ID

  • User name

  • Age

  • Gender

  • User score

  • Custom user-defined data

import 'package:flutter/material.dart';
import 'package:shoplive_player/shoplive_common.dart';
import 'package:shoplive_player/shoplive_player.dart';
class MainPage extends StatefulWidget {
  const MainPage({Key? key}) : super(key: key);
  @override
  State<MainPage> createState() => _MainPageState();
}
class _MainPageState extends State<MainPage> {
  late final ShopLiveCommon _shopLiveCommon = ShopLiveCommon();
  late final ShopLivePlayer _shopLivePlayer = ShopLivePlayer();
  @override
  void initState() {
    super.initState();
    _shopLiveCommon.setAccessKey(accessKey: "{AccessKey}");
  }
  void playWithUser() {
    var user = ShopLiveCommonUser(
      userId: "{USER_ID}",
      userName: "{USER_NAME}",
      gender: ShopLiveCommonUserGender.MALE,
      userScore: 100,
      age: 25,
      custom: {"key": "AnyType value"},
    );
    _shopLiveCommon.setUser(
      accessKey: "{AccessKey}",
      user: user,
    );
    _shopLivePlayer.play(
      data: ShopLivePlayerData(campaignKey: "{CampaignKey}"),
    );
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Shoplive User Example')),
      body: Center(
        child: ElevatedButton(
          onPressed: playWithUser,
          child: const Text('Play with User Account'),
        ),
      ),
    );
  }

• API Reference: ShopLiveCommonUser

Secure Authentication: User Account Integration

You can configure user information such as user ID and name in the Shoplive Flutter SDKusing a security authentication token (JWT).
The token is issued for a Campaign Key from the Shoplive Admin console.

import 'package:flutter/material.dart';
import 'package:shoplive_player/shoplive_common.dart';
import 'package:shoplive_player/shoplive_player.dart';
class MainPage extends StatefulWidget {
  const MainPage({Key? key}) : super(key: key);
  @override
  State<MainPage> createState() => _MainPageState();
}
class _MainPageState extends State<MainPage> {
  late final ShopLiveCommon _shopLiveCommon = ShopLiveCommon();
  late final ShopLivePlayer _shopLivePlayer = ShopLivePlayer();
  @override
  void initState() {
    super.initState();
    _shopLiveCommon.setAccessKey(accessKey: "{AccessKey}");
  }
  void playWithAuthToken() {
    var jwtToken = "{USER_JWT}";
    _shopLiveCommon.setAuthToken(userJWT: jwtToken);
    _shopLivePlayer.play(
      data: ShopLivePlayerData(campaignKey: "{CampaignKey}"),
    );
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Shoplive Auth Example')),
      body: Center(
        child: ElevatedButton(
          onPressed: playWithAuthToken,
          child: const Text('Play with Secure Authentication'),
        ),
      ),
    );
  }
}

Requesting a Security Authentication Token (JWT)

• Request a security authentication token (JWT) from your Shoplive representative.

• The client server must generate the JWT and provide it to the app client through the Shoplive Flutter SDK API.

• Users can be authenticated using the Campaign Key issued from the Shoplive Admin console.

Authentication Token Generation Guide

import 'package:shoplive_player/shoplive_common.dart';
final _common = ShopLiveCommon();
_common.setAuthToken(userJWT: "{USER_JWT}");