docs

Setting up Social Signin

To setup this feature, please do the following steps:

  1. Click on Appearance
  2. Then, click on Theme Options
  3. Finally, click on Signup & Singin

** NOTE: If you want use Social or Apple login then you must have Client ID and Client Secret 

docs

Configuring Apple Login

Since iOS 13, Apple has changed their privacy. In order to submit your App to App Store, Apple Login is required now.

To know more about Apple Login, please read https://support.apple.com/en-in/HT210699

In this tutorial, We will show you how to setup Apple Login in Wilcity.

Note that it will take effect to the both Wilcity Web Version and Wilcity App version.

At the end of this process, you’ll end up with a registered client_id (which they call a Service ID), a private key downloaded as a file, and you’ll verify a domain and set up a redirect URL for the app.

Step 1: Apple App ID

Firstly, sign in to the Apple Developer Portal and click on Certificates, Identifiers and Profiles:

Next, Navigate to Identifiers. On the Identifiers page, you can see a list of registered App IDs. If you don’t have any App ID, you will have to create a new one.

  • If you don’t have App IDs, please click this link
  • If you already have the App IDs. please click this link

Create the App IDs

Step 1: Select App IDs

Choose App IDs

Step 2: On the next screen, please write something about your app to description field and set Explicit to Bundle ID. The Bundle ID is best when it’s a reverse-dns style string.

Enter your App ID information

For example:  you should use com.yoursite if your site address is yoursite.com.

You’ll also want to scroll down through the list of capabilities and check the box next to Sign In with Apple.

Click the checkbox to enable Sign In with Apple

Go ahead and confirm this step.

Edit Existing App IDs

Click on your App IDs Name:

You will see the list of the App ID Configuration here, scroll down to find Sign In With Apple, check the tick box at (1), then click edit at (2) :

After clicking on (2), make sure you choose Enable as a primarily App ID. Finally, click Save button to save the changes.

Step 2: Create a Services ID (Client_ID)

This is required to make single login experience.

The Services ID will identify the particular instance of your app, and is used as the OAuthclient_id.

Go ahead and create a new identifier and choose Services IDs.

Create a new Services ID

In the next step, you’ll define the name of the app that the user will see during the login flow, as well as define the identifier which becomes the OAuthclient_id.Make sure to also check the Sign In with Apple checkbox.

Enter Services ID information

You’ll also need to click the Configure button next to Sign In with Apple in this step. This is where you’ll define the domain your app is running on, as well as define the redirect URLs used during the OAuth flow.

Web Authentication Configuration, enter example-app.com/redirect for the redirect URL

Make sure your associated App ID is chosen as the Primary App ID. (If this is the first App ID you’ve made that uses Sign In with Apple, then it will probably already be selected.)

Enter the domain name your app will eventually be running at, and enter the redirect URL for your app as well.

Your redirect URL MUST have this format URL like this:

https://example-app.com?redirect=apple

which will catch the redirect so you can see the authorization code returned.

It’s worth noting that Apple doesn’t allow localhost URLs in this step, and if you enter an IP address like 127.0.0.1 it will fail later in the flow. You have to use a real domain here.

Go ahead and click Save and then Continue and Register until this step is all confirmed.

At this point, you now have an App ID container to hold everything, and you’ve created a Services ID which you’ll use as your OAuth client_id. The Identifier you entered for your Services ID is your OAuth client_id.

Step 3: Create a Private Key for Client Authentication

Rather than using simple strings as OAuth client secrets, Apple has decided to use a public/private key pair, where the client secret is actually a signed JWT. This next step involves registering a new private key with Apple.

Back in the main Certificates, Identifiers & Profiles screen, choose Keys from the side navigation.

Side menu

Click the blue plus icon to register a new key. Give your key a name, and check the Sign In with Apple checkbox.

Register a new key

Click the Configure button and select your primary App ID you created earlier.

Select the primary App ID

Apple will generate a new private key for you and let you download it only once. Make sure you SAVE this file, because you won’t be able to get it back again later! The file you download will end in .p8, but it’s just text inside, so rename it to key.txt so that it’s easier to use in the next steps

Download your key

Lastly, go back and view the key information to find your Key ID which you’ll need in the next step.

Find your key ID

Generate the Client Secret

Rather than static client secrets, Apple requires that you derive a client secret yourself from your private key. They use the JWT standard for this, using an elliptic curve algorithm with a P-256 curve and SHA256 hash. In other words, they use the ES256 JWT algorithm. Some JWT libraries don’t support elliptic curve methods, so make sure yours does before you start trying this out.

The Ruby JWT library supports this algorithm, so we’ll use that to generate the secret.

First, make sure you’ve got Ruby installed, and then install the JWT gem by running this from the command line:

gem install jwt

Now thejwt gem should be available for use. Fill in the missing values at the top of this file, and save it as client_secret.rb. You should already have the client_id value from the previous step. You’ll also need your Apple Team ID. This is displayed in a few places, but the most convenient is in the top right corner of the screen. Use the Key ID you found in the previous step.

Find your team ID in the top right corner

client_secret.rb

require 'jwt'

key_file = 'key.txt'
team_id = ''
client_id = ''
key_id = ''

ecdsa_key = OpenSSL::PKey::EC.new IO.read key_file

headers = {
  'kid' => key_id
}

claims = {
	'iss' => team_id,
	'iat' => Time.now.to_i,
	'exp' => Time.now.to_i + 86400*180,
	'aud' => 'https://appleid.apple.com',
	'sub' => client_id,
}

token = JWT.encode claims, ecdsa_key, 'ES256', headers

puts token

This code generates a JWT using the ES256 algorithm which includes a handful of claims. This JWT expires in 6 months, which is the maximum lifetime Apple will allow. If you’re generating a new client secret JWT every time a user authenticates, then you should use a much shorter expiration date, but this allows us to generate the secret once and use it in our sample apps easily.

Now you can run this from the command line and it will output a JWT.

ruby client_secret.rb

result ( this is just an example, please don’t using this output JWT ):

eyJraWQiOiJGUVVBN0RYUkJGIiwiYWxnIjoiRVMyNTYifQ.eyJpc3MiOiI3TUM2VVpSMlVWIiwiaWF0IjoxNTU5NjE0MjU2LCJleHAiOjE1NzUxNjYyNTYsImF1ZCI6Imh0dHBzOi8vYXBwbGVpZC5hcHBsZS5jb20iLCJzdWIiOiJsb2wuYXZvY2Fkby5jbGllbnQifQ.t6wIFrSKwuCZsJ9I1TWWBCdxmUMG3g0kNyNnxhkpG3oZAKY2UdXqL5CyRGTa21OYHa6ir1JFWkdBDjTNvt8hYC

Step 4: Integrate Client ID and Client Secret to Wilcity Theme

Finally, Please go to yourTheme Options/ Register and Login -> Apple Loginthen filling the value Client ID and Client Secret

Client ID is the Bundle ID you created at the app ID

The client secret is the output after you run the command line

ruby client_secret.rb

This is described in Apple’s documentation Generate and validate tokens.

NOTICE:

If you build the iOS app and submit again, please run this commands:

expo build:ios --clear-provisioning-profile --revoke-credentials

To generate the new mobile provisioning profiles, to recreate a new provisioning profile with updated capabilities Apple Login inside

docs

Gutenberg Elements

HsBlog is compatible with Gutenberg and We created some Gutenberg elements for you as well

To use HsBlog Gutenberg Elements, please click on  HSBlog tab

1 – Compare Image Element

2 – Gallery Image Element

3 – Video Popup Element

docs

Setting up Post Format your Post

In HsBlog, You can set up a Post Format for each article:

  1. From the admin sidebar, click on Posts -> Add New (or Edit post)
  2. On Right Side – Document tab: Click on Status & Visibility and select Post Format (Gallery, Video, Audio, Standard).
  3. Video/Audio: if Post format is Video or Audio, please scroll down to Hsblog Video/ Hsblog Audio and paste the link of media into the field.
  4. Galley: If Post format is Gallery, please scroll down to Hsblog Gallery and select images in the gallery field.

** Audio and video link: HsBlog is supporting YouTube, Facebook, SoundCloud, Streamable, Vidme, Vimeo, Wistia, Twitch, DailyMotion, Vidyard, and  all Supported file types <video>element or <audio>element

  • HLS streams are played using hls.js
  • DASH streams are played using dash.js

docs

Setting up Related Post on Single Post Page

This article will show you how to set up “Related Posts” on Single Post page:

  1. Click on Appearance
  2. Then, click Theme Options
  3. Finally, Navigate to  Single Post Settings

1 – Related posts style

  • Related style : Grid / Slider / List

2 – Related post title:

3 – Setting up Filter for related post:

  • Number of Related Posts: Maximum Related posts can be shown on this section
  • Related Posts In the same: Which means the posts have the same Category / Tag with currently post will be shown up
  • Order By, Order

docs

Enable/Disable Siderbar on Single Post Page

This article will show you how to Enable/Disable sidebar on Single Post Page:

  1. Click on Appearance
  2. Then, click on Theme Options
  3. Navigate to Single Post Settings.
  4. Switch Single Sidebar: On for Enable/ Off for disabling sidebar.

1 – Enable Sidebar

Note: Sidebar show on a single page is “Single sidebar sidebar” on widgets setting.

Navigate to Appearance > Widgets > Single sidebar sidebar

2 – Disable Sidebar