This document describes what you should do to integrate the Kakao SDK for JavaScript (hereinafter referred to as 'JavaScript SDK') into your web before leveraging the Kakao APIs.
To use the JavaScript SDK, you must register the Web platform in advance. Go to [My Application] > [Platform] and register your site domains.
To configure your project, you need the JavaScript key issued when creating your app. Go to [My Application] > [App Keys], and get your JavaScript key.
You can demonstrate or test the functionalities of the JavaScript SDK provided on [Tools].
You can download the latest version of the JavaScript SDK and import the downloaded script file into your webpage.
You can also import the JavaScript SDK into your web page by adding the following <script>
element into your HTML, with which you can keep the SDK up-to-date all the time.
<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
To initialize the JavaScript SDK, add the init()
function in your JavaScript file and pass your JavaScript key copied in [My Application] > [App Keys].
Kakao.init('JAVASCRIPT_KEY');
Kakao.isInitialized();
Here is an example of initializing the JavaScript SDK and checking if the initialization is successfully done by calling the isInitialized()
function.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kakao JavaScript SDK</title>
<script src="YOUR_SDK_FILE_PATH"></script>
<script>
// Initialize SDK with JavaScript key for your app.
Kakao.init('JAVASCRIPT_KEY');
// Check if the initialization is successfully done.
console.log(Kakao.isInitialized());
</script>
</head>
<body></body>
</html>
The JavaScript SDK supports the most commonly used web browsers. Here are the supported web browsers and versions by platform.
Browser / Platform | Android | iOS | macOS | Windows |
---|---|---|---|---|
Chrome* | O | O | O | O |
Edge* | O | O | O | O |
Firefox* | O | O | O | O |
Safari | X | O | O | X |
Internet Explorer (IE) | X | X | X | O** |
* JavaScript SDK supports the latest two versions of Chrome, Edge, and Firefox.
** JavaScript SDK supports IE 9 or higher. For the Uploading image function for Kakao Photo Story, it supports IE 10 or higher. (Refer to Notice.)
If you want to use the JavaScript SDK for a web page on a hybrid application (hereinafter referred to as 'hybrid app'), you must develop a WebView as follows to work properly.
The Kakao SDK is intended to make your development much easier. However, when you need to integrate Kakao Login and Kakao Link into a hybrid app using the JavaScript SDK, you need to proceed the extra jobs as follows due to technological limitation.
Here are the procedures to develop a WebView on the Android and iOS platforms.
AndroidThe code snippets below are written in Kotlin.
On Android 11 or higher, you must add the package name to the AndroidManifest.xml file to implement the Kakao Login and Kakao Link features using the JavaScript SDK. Otherwise, Android Framework blocks the API calls.
<manifest package="com.example.sample">
<queries>
<package android:name="com.kakao.talk" />
</queries>
...
</manifest>
To log in with Kakao or send a Kakao Link message, the JavaScript SDK creates a URL to run Kakao Talk and makes a call. In general, a web browser starts Kakao Talk through the URL. If you do not process the actions described below for WebViews, an error occurs.
Use Intent URI
to run an app through a WebView on the Android app. Refer to Android Intents with Chrome for more details.
Create Intent URI for the JavaScript SDK to run Kakao Talk and make a call. Override the WebViewClient#shouldOverrideUrlLoading method in WebView
, parse intent
and run Activity
.
webView = // main WebView
// common settings
webView.settings.run {
javaScriptEnabled = true
javaScriptCanOpenWindowsAutomatically = true
setSupportMultipleWindows(true)
}
webView.webViewClient = object: WebViewClient() {
override fun shouldOverrideUrlLoading(view: WebView,request: WebResourceRequest): Boolean {
Log.d(TAG, request.url.toString())
if (request.url.scheme == "intent") {
try {
// Create Intent
val intent = Intent.parseUri(request.url.toString(), Intent.URI_INTENT_SCHEME)
// run an app if there is an executable app.
if (intent.resolveActivity(packageManager) != null) {
startActivity(intent)
Log.d(TAG, "ACTIVITY: ${intent.`package`}")
return true
}
// Load the WebView if there is Fallback URL
val fallbackUrl = intent.getStringExtra("browser_fallback_url")
if (fallbackUrl != null) {
view.loadUrl(fallbackUrl)
Log.d(TAG, "FALLBACK: $fallbackUrl")
return true
}
Log.e(TAG, "Could not parse anythings")
} catch (e: URISyntaxException) {
Log.e(TAG, "Invalid intent request", e)
}
}
// Implement the rest logic for a service.
return false
}
}
Use a pop-up window to implement some functionalities in the JavaScript SDK for a better user experience. For this, you need to make a WebView created or deleted according to window.open()
and window.close()
calls.
If you set WebChromeClient for WebView, the following methods are called when a pop-up funcution starts in the JavaScript:
webView = // Main WebView
webViewLayout = // The layout that the WebView is included
// Common settings
webView.settings.run {
javaScriptEnabled = true
javaScriptCanOpenWindowsAutomatically = true
setSupportMultipleWindows(true)
}
webView.webChromeClient = object: WebChromeClient() {
/// ---------- Open pop-up ----------
/// - Use a pop-up for Kakao Login in the JavaScript SDK.
/// - Must create a seperate WebView when calling window.open()
///
override fun onCreateWindow(
view: WebView,
isDialog: Boolean,
isUserGesture: Boolean,
resultMsg: Message
): Boolean {
// Create a WebView
var childWebView = WebView(view.context)
// Set the same WebView as a parent WebView.
childWebView.run {
settings.run {
javaScriptEnabled = true
javaScriptCanOpenWindowsAutomatically = true
setSupportMultipleWindows(true)
}
layoutParams = view.layoutParams
webViewClient = view.webViewClient
webChromeClient = view.webChromeClient
}
// Add a WebView to the layout
webViewLayout.addView(childWebView)
// TO DO: It is recommended to manage a seperate WebView
// to handle navigation action of users
// such as onBackPressed() besides adding a layout.
// ex) childWebViewList.add(childWebView)
// Syncronize between WebViews
val transport = resultMsg.obj as WebView.WebViewTransport
transport.webView = childWebView
resultMsg.sendToTarget()
return true
}
/// ---------- Close a pop-up ----------
/// - Must close the created WebView when window.close() is called.
///
override fun onCloseWindow(window: WebView) {
super.onCloseWindow(window)
// Remove a pop-up from the layout
webViewLayout.removeView(window)
// TO DO: It is recommended to manage a seperate WebView array
// to handle navigation action of users
// such as onBackPressed() besides adding a layout.
// ex) childWebViewList.remove(childWebView)
}
}
The code snippets below are written in Swift.
To log in with Kakao or send a Kakao Link message, the JavaScript SDK creates a URL to run Kakao Talk and makes a call.
On iOS devices, an app is launched through Custom URL Schemes or Universal Links. If a Universal Link is invoked, a web browser launches Kakao Talk through the URL. Thus, you do not need to process any particular job to open the URL because the JavsScript SDK supports the Universal Link.
On the other hand, if a Custom URL Scheme is invoked, you must process as follows for a WebView. Otherwise, an error occurs. Kakao Talk only starts when opening the URL on a WebView through the open(_ url:)
method.
func webView(_ webView: WKWebView,
decidePolicyFor navigationAction: WKNavigationAction,
decisionHandler: @escaping (WKNavigationActionPolicy) -> Void
) {
print(navigationAction.request.url?.absoluteString ?? "")
// If the Custom URL Scheme is invoked, open(_ url:) is called.
if let url = navigationAction.request.url , ["kakaolink"].contains(url.scheme) {
// If the system can handle the url, Kakao Talk is launched.
if UIApplication.shared.canOpenURL(url) {
UIApplication.shared.open(url, options: [:], completionHandler: nil)
}
decisionHandler(.cancel)
return
}
// Implement the rest logic for your service.
decisionHandler(.allow)
}
Use a pop-up window to implement some functionalities in the JavaScript SDK for a better user experience. For this, you need to make a WebView created or deleted according to window.open()
and window.close()
calls.
If you set WKUIDelegate for WebView, the following methods are called when a pop-up funcution starts in the JavaScript:
class ViewController: UIViewController, WKUIDelegate, WKNavigationDelegate {
// Manage a list of WebViews
var webViews = [WKWebView]()
...
/// ---------- Open pop-up ----------
/// - Use a pop-up for Kakao Login in the JavaScript SDK.
/// - Must create a seperate WebView when calling window.open()
///
func webView(_ webView: WKWebView,
createWebViewWith configuration: WKWebViewConfiguration,
for navigationAction: WKNavigationAction,
windowFeatures: WKWindowFeatures
) -> WKWebView? {
guard let frame = self.webViews.last?.frame else {
return nil
}
// If creating a WebView and returning the WebView, the WebView becomes a child of the current WebView as a parent
return createWebView(frame: frame, configuration: configuration)
}
/// ---------- Close a pop-up ----------
/// - Must close the created WebView when window.close() is called.
///
func webViewDidClose(_ webView: WKWebView) {
destroyCurrentWebView()
}
// An example of methods to create a WebView
func createWebView(frame: CGRect, configuration: WKWebViewConfiguration) -> WKWebView {
let webView = WKWebView(frame: frame, configuration: configuration)
// Set delegate
webView.uiDelegate = self
webView.navigationDelegate = self
// Add to the layout
self.view.addSubview(webView)
// Add to the list of WebViews
self.webViews.append(webView)
// Add other views to optimize for a service environment
return webView
}
// an example of methods to delete a WebView
func destroyCurrentWebView() {
// Remove a WebView from the layout abd list of WebViews
self.webViews.popLast()?.removeFromSuperview()
}
}